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

Cancel all queued jQuery slideUp and slideDown animations

提问by Candidasa

I have an interface that makes heavy use of the jQuery slideUp and slideDown effect to expand items in a tri-state kind of way.

我有一个界面，它大量使用 jQuery slideUp 和 slideDown 效果以一种三态的方式扩展项目。

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

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.

但是，当用户将鼠标快速移动到这些界面元素上时，动画跟不上，并且在鼠标离开界面区域后很长一段时间内，项目都会上下滑动。

Is there a way to cancel all the queued-up slide animations when the mouse leaves the item's container div?

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

回答by Matt Crest

I believe you should be able to just add a .stop() and it'll take care of that for you:

我相信您应该能够添加一个 .stop() 并且它会为您处理：

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

回答by Andrew Bullock

The answer you really want is a combination of all the other three answers.

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

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

You want the trues in the stop because these clear the pending animation queues. If you dont use these, you'll find moving the mouse quickly and repeatedly across the element will produce buggy results.

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

回答by cletus

Generally speaking you want to call stop()when starting such an animation:

一般来说，你要stop()在启动这样的动画时调用：

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

That should be sufficient to avoid long-running animation queues.

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

You can also use $.clearQueue()to globally clear animations that haven't yet begun.

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

Also, if you're setting these on mouseover()and mouseout()it is arguably clearer to simply use the hover()event instead.

此外，如果您将这些设置为开启mouseover()，mouseout()并且可以简单地使用该hover()事件来代替它可以说更清楚。

回答by user403151

It is also much better if you put parameters in stop(), just like this: stop(true,true)...

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

回答by falsarella

In my case, I was also looking for a .stop()solution to the up and down extensive animation queue. However, it still didn't solve, because it wasn't smooth, and it was buggy, making it not to slide down anymore.

就我而言，我也在寻找.stop()解决上下扩展动画队列的方法。但是还是没有解决，因为不流畅，而且有bug，不能滑下去了。

Hence, I came with a solution that is not related to cancel queues, but it might help some of you. The solution is about sliding it down or up just when the animation target is not currently being animated.

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

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

回答by maudulus

You could do something like the following: http://jsfiddle.net/3o2bsxo6/3/

您可以执行以下操作：http: //jsfiddle.net/3o2bsxo6/3/

JavaScript

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:

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:

CSS：

p{
    display:none;
}

回答by Debadatta Meher

Similar query was posted in thisthread. Using

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

stop(true, false)

停止（真，假）

您可以在没有错误的情况下实现效果。

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

I've assumed that there is an element after #YourDivthat you want to put slide-up and slide-down animations.

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

This will jump to the animation of the last event and clear all the pending events in the chain.

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