Отменить все анимации jQuery в формате jQuery и slideDown

Ответ 1

Я считаю, что вы должны просто добавить .stop(), и это позаботится об этом для вас:

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

Ответ 2

Ответ, который вы действительно хотите, представляет собой комбинацию всех трех других ответов.

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

Вы хотите, чтобы true остановился, потому что они очищают ожидающие очереди анимации. Если вы не используете их, вы сможете быстро и быстро перемещать мышь по элементу, что приведет к ошибкам.

Ответ 3

Вообще говоря, вы хотите называть stop() при запуске такой анимации:

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

Этого должно быть достаточно, чтобы избежать длительных очередей анимации.

Вы также можете использовать $.clearQueue() глобально очистительные анимации, которые еще не начались.

Кроме того, если вы установите их на mouseover() и mouseout(), возможно, проще использовать событие hover() вместо этого.

Ответ 4

Также гораздо лучше, если вы поместите параметры в stop(), как это: stop(true,true)...

Ответ 5

В моем случае я также искал решение .stop() для расширенной очереди анимации вверх и вниз. Тем не менее, он по-прежнему не решался, потому что он был негладким, и он был глючит, заставляя его больше не скользить вниз.

Следовательно, я пришел с решением, которое не связано с очередями отмены, но это может помочь некоторым из вас. Решение состоит в том, чтобы сдвинуть его вниз или вверх, только когда анимационная цель в настоящее время не анимируется.

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

Ответ 6

Вы можете сделать что-то вроде следующего: http://jsfiddle.net/3o2bsxo6/3/

JavaScript

$('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                           
        }
    })      
})

HTML:

<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;
}

Ответ 7

Аналогичный запрос был опубликован в этой теме. Использование

stop (true, false)

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

Я предположил, что после #YourDiv есть элемент, который вы хотите разместить анимации скольжения и слайд-вниз.

Это приведет к анимации последнего события и очистит все ожидающие события в цепочке.