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

Question

我有一个接口，这使得大量使用的延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();
});

您想在停止trues因为这些清除挂起动画队列。如果你不使用这些，你会发现快速和反复移动鼠标越过元素会产生越野车的效果。

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

类似的查询被张贴在此线程。 使用结果

止动件（真，假）

可以实现无缺陷的效果。

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

我认为有后一个元素的 #YourDiv 要放滑和滑动下来的动画。

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