Отменить все очереди jQuery slideUp и slideDown анимации

У меня есть интерфейс, который активно использует эффект jQuery slideUp и slideDown для расширения элементов в трех состояниях.

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

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

есть ли способ отменить все анимации слайдов в очереди, когда мышь покидает контейнер div элемента?

18
animation javascript jquery slidedown slideup

7 ответов

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

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

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

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

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

21

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

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

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

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

кроме того, если вы сидите на mouseover() и mouseout() возможно, яснее просто использовать hover() событие.

7

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

6

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

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

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

вы можете сделать что-то вроде следующего: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;
}
1

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

стоп (true, false)
вы можете достичь эффекта без ошибок. 
$('#YourDiv').on('mouseenter', function(){
   $(this).next().slideDown(250).stop(true, false).slideDown()  
});

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

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

0