取消所有排队的 jQuery SlideUp 和 SlideDown 动画

Question

我有一个界面，它大量使用 jQuery SlideUp 和 SlideDown 效果以三态方式展开项目。

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

然而，当用户将鼠标快速移动到这些界面元素上时，动画无法跟上，并且在鼠标离开界面区域很长时间后，项目将上下滑动。

当鼠标离开项目的容器 div 时，有没有办法取消所有排队的幻灯片动画？

Answer 1

您真正想要的答案是所有其他三个答案的组合。

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

您希望停止时为 true，因为它们会清除待处理的动画队列。如果您不使用这些，您会发现在元素上快速且重复地移动鼠标会产生错误的结果。

Answer 2

一般来说，您需要在启动此类动画时调用 stop() ：

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

这应该足以避免长时间运行的动画队列。

您还可以使用 $.clearQueue() 全局清除尚未设置的动画还没有开始。

另外，如果您在 mouseover() 和 mouseout() 上设置这些，那么简单地使用 hover() 事件。

Answer 3

如果将参数放在 stop() 中也会更好，就像这样：stop(true,true)...

Answer 4

就我而言，我也在寻找一个 .stop() 解决上下扩展动画队列的问题。不过还是没解决，因为不顺畅，还有bug，让它再也滑不下去了。

因此，我提出了一个与取消队列无关的解决方案，但它可能会对你们中的一些人有所帮助。解决方案是在动画目标当前未进行动画处理时向下或向上滑动它。

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

Answer 5

您可以执行以下操作： 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 6

类似的查询已发布在此线程中。
使用

停止（真，假）

you can achieve the effect without bugs.

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

我假设在 #YourDiv 之后有一个元素要放置向上滑动和向下滑动动画。

这将跳转到最后一个事件的动画并清除链中所有待处理的事件。

Answer 7

我相信你应该能够只添加一个 .stop() 它会为你处理这个问题：

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