取消所有排队的jQuery slideUp和slideDown动画

我有一个界面，大量使用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：

 
Hover To Slide
 
 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. 
 
Hover To Slide
 
 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. 
 
Hover To Slide
 
 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.  

CSS：

 p{ display:none; } 

Answer 7

类似的查询已发布在此主题中。 运用

停止（真，假）

你可以实现没有错误的效果。

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

我假设#YourDiv之后有一个元素，你想放置上滑动画和下滑动画。

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