موحية العناصر المضمنة مع مسج

Question

وأنا أحاول لإظهار وإخفاء عنصر مضمنة (مثل فترة) باستخدام مسج.

إذا أنا فقط استخدام تبديل ()، وأنها تعمل كما هو متوقع ولكن إذا كنت تستخدم تبديل ( "بطيء") لإعطائها للرسوم المتحركة، فإنه يتحول العمر إلى عنصر كتلة وبالتالي إدراج فواصل.

هل الرسوم المتحركة ممكن مع العناصر المضمنة؟ وأود أن تفضل على نحو سلس انزلاق إن أمكن، وليس تتلاشى في.

<script type="text/javascript">
    $(function(){
        $('.toggle').click(function() { $('.hide').toggle("slow") });
    });
</script>
<p>Hello <span class="hide">there</span> jquery</p>
<button class="toggle">Toggle</button>

Answer 1

وtoggle() لديه مجموعة من الأشياء الغريبة معها، بما في ذلك إخفاء أو تحويل عناصر غريبة في بعض الأحيان. وهنا حل مماثل:

$('.toggle').click(function() {
  $('.hide').animate({
    'opacity' : 'toggle',
  });
});

تعديل : في هنا وسيلة لإضافة نحو سلس انزلاق، مع الحد الأدنى من العلامات HTML إضافية:

var hidepos = $('.hide').offset().left;
var slidepos = $('.slide').offset().left;

$('.toggle').click(function() {
    var goto = ($('.slide').offset().left < slidepos) ? slidepos : hidepos;

    $('.slide').css({
        'left' : $('.slide').offset().left,
        'position' : 'fixed',
    }).animate({
        'left' : goto,
    }, function() {
        $(this).css('position', 'static');
    });

    $('.hide').animate({
        'opacity' : 'toggle',
    });
});

وأتش تي أم أل:

<p>Hello <span class="hide">there</span> <span class="slide">jquery</span></p>
<button class="toggle">Toggle</button>

Answer 2

وفقط CSS-خاصية واحدة سوف تجعلك سعيدا: HTTP: //terion-fallen.livejournal كوم / 332945.html

#animated-element { display: inline-block!important }

Answer 3

وأنا لا أعتقد أنه من الممكن من هذا القبيل. الطريقة الوحيدة التي يمكنني أن أفكر للقيام بذلك سيكون لتحريك التعتيم بين 0 و 1، و، وذلك باستخدام رد على الرسوم المتحركة، ثم تشغيله أو إيقاف تشغيله.

$('.toggle').click(function() {
    $('.hide:visible').animate(
        {opacity : 0},
        function() { $(this).hide(); }
    );
    $('.hide:hidden')
        .show()
        .animate({opacity : 1})
    ;
});

Answer 4

وكما أظهرت إجابات أخرى، ويتلاشى من الممكن. ومع ذلك، لا أعتقد أن "نحو سلس انزلاق" سيكون. ببساطة، خاصية معينة من العنصر يجب أن تكون متحركة. وتمتد مضمنة مثل التي ذكرتها لا يوجد لديه ارتفاع أو عرض محدد، على الرغم من أنه لديه غموض.

Answer 5

وأنا لا أعتقد أن ما تريد القيام به من الممكن حتى العرض: مضمنة كتلة ودعما جيدا عبر المتصفحات. الآن، وأعتقد أنني سوف تتلاشى الخلفية إلى اللون الأحمر، ومن ثم إخفاء العنصر.

إذا عرض: تم دعم مضمنة كتلة جيدا، هل يمكن أن تغيير نمط مضمنة كتلة، ومن ثم تحريك العرض أو الارتفاع، ولكن للأسف هذا لن تعمل بشكل جيد جدا في هذه الأيام. ربما في عام 2010:)

Answer 6

والحقيقة أن "الأرواح" يغير ما هو عليه موحية إلى عنصر كتلة ليست قضية إذا ما كنت تحاول الانزلاق اليمين أو اليسار يتم وضع مع تعويم: غادر وكل ما هو بجانبه يتم وضع أيضا مع تعويم: اليسار

 $('#pnlPopup #btnUpdateButton').assertOne().animate({ width: "toggle" });

وإذا تم نصب #btnUpdateButton مع ثم بعد ذلك الشرائح لطيف جدا ويدفع المحتوى إلى اليمين.

#btnUpdateButton {
    float: left;
    margin-right: 5px;
}