إلغاء جميع قائمة الانتظار مسج سليديوب و سليديدون الرسوم المتحركة

Question

لدي واجهة التي تجعل الاستخدام الكثيف لل مسج سليديوب و سليديدون تأثير لتوسيع العناصر في نوع ثلاثي الدولة من الطريق.

onmouseover: function() { 
this.find('.details', this).slideDown(); 
},
onmouseout: function() { 
this.find('.details', this).slideUp(); 
}

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

هل هناك طريقة لإلغاء جميع الرسوم المتحركة للشرائح في قائمة الانتظار عندما يترك الماوس قسم حاوية العنصر?

Answer 1

أعتقد أنك يجب أن تكون قادرًا على إضافة stop () وسيعتني بذلك من أجلك:

onmouseover: function() { 
this.find('.details', this).stop().slideDown(); 
},
onmouseout: function() { 
this.find('.details', this).stop().slideUp(); 
}

Answer 2

هل يمكنك إظهار CSS الحالي على الأزرار؟أعتقد أن شيئا من هذا القبيل سيحدد المشكلة لك في Internet Explorer غير متأكد من Firefox ... giveacodicetagpre.

Answer 3

بشكل عام ، تريد الاتصال stop() عند البدء في مثل هذه الرسوم المتحركة:

$("...").hover(function() {
  $(this).stop().slideDown();
}, function() {
  $(this).stop().slideUp();
});

يجب أن يكون ذلك كافيًا لتجنب طوابير الرسوم المتحركة طويلة الأمد.

تستطيع ايضا استخذام $.clearQueue() إلى الرسوم المتحركة الواضحة عالميا لم تبدأ بعد.

أيضًا ، إذا كنت تقوم بتعيينها على mouseover() و mouseout() يمكن القول أنه أكثر وضوحًا لاستخدام ببساطة hover() الحدث بدلا من ذلك.

Answer 4

كما أنه أفضل بكثير إذا وضعت المعلمات في stop(), ، تماما مثل هذا: stop(true,true)...

Answer 5

في حالتي ، كنت أبحث أيضا عن .stop() حل لأعلى ولأسفل قائمة انتظار الرسوم المتحركة واسعة النطاق.ومع ذلك ، لم يتم حلها بعد ، لأنها لم تكن سلسة ، وكانت عربات التي تجرها الدواب ، مما يجعلها لا تنزلق بعد الآن.

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

$("#trigger").on({
    mouseover: function() {
        $("#animationTarget").not(":animated").slideDown();
    },
    mouseleave: function() {
        $("#animationTarget").not(":animated").slideUp();
    }
});

Answer 6

يمكنك أن تفعل شيئًا مثل ما يلي: http://jsfiddle.net/3o2bsxo6/3/

جافا سكريبت

$('h5').each(function(){
    $(this).unbind('mouseover'); //unbind previous events (prevent repeats)
    $(this).unbind('mouseout');

    $(this).on('mouseover',function(){
        if(!$(this).next('.details').is(':visible')){ //if not visible
             $(this).next('.details').slideDown();   //slidedown                        
        }
    })  
    $(this).on('mouseout',function(){
        if($(this).next('.details').is(':visible')){ //if visible
             $(this).next('.details').slideUp();    //slideup                           
        }
    })      
})

لغة البرمجة:

<h5>Hover To Slide</h5>
<p class="details">
However, when the user quickly moves the mouse over these interface elements the animations can't keep up and the items will be sliding up and down long after the mouse has left the interface area.    
</p>
<h5>Hover To Slide</h5>
<p class="details">
However, when the user quickly moves the mouse over these interface elements the animations can't keep up and the items will be sliding up and down long after the mouse has left the interface area.    
</p>
<h5>Hover To Slide</h5>
<p>
However, when the user quickly moves the mouse over these interface elements the animations can't keep up and the items will be sliding up and down long after the mouse has left the interface area.    
</p>

CSS:

p{
    display:none;
}

Answer 7

تم نشر استعلام مماثل في هذه مسلك. استخدام

توقف (صحيح ، خطأ)

يمكنك تحقيق التأثير بدون الأخطاء.

$('#YourDiv').on('mouseenter', function(){
   $(this).next().slideDown(250).stop(true, false).slideDown()  
});

لقد افترضت أن هناك عنصرًا بعد ذلك #Yourdiv التي تريد وضع الرسوم المتحركة للانزلاق والانزلاق.

سيقفز هذا إلى الرسوم المتحركة للحدث الأخير ومسح جميع الأحداث المعلقة في السلسلة.