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

Question

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

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

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

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

Answer 1

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

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

Answer 2

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

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

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

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/

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

Answer 7

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

stop (true, false)

Вы можете добиться эффекта без ошибок.

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

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

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