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

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

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

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

---

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

我相信您应该可以添加一个.stop（），它会为您解决这个问题：

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

---

一般来说，启动此类动画时要调用：

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

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

还可以使用全局清除尚未开始的动画

---

另外，如果您将这些设置为

mouseover（）

和

mouseout（）

则可以更清楚地使用事件。

如果您将参数放入

stop（）

，就像这样：

stop（true，true）

…

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

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

---

您希望

true

s处于停止状态，因为这会清除挂起的动画队列。如果不使用这些，您会发现在元素上快速重复地移动鼠标会产生错误的结果。

在我的例子中，我也在寻找一个

.stop（）

解决方案，用于上下扩展的动画队列。然而，它仍然没有解决问题，因为它不平滑，而且它有四轮马车，使它不再往下滑

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

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

---

您可以执行以下操作：

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>

p{
    display:none;
}

---

类似的查询在线程中发布。 使用
停止（真、假）您可以在没有bug的情况下实现效果

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

我假设在#YourDiv之后有一个元素，您希望放置幻灯片向上和向下动画

---

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

还要确保您使用的是jQuery 1.7.2或更高版本，因为以前在使用slideUp（）和slideDown（）以及stop（）时出现了一个错误，如果您将鼠标快速悬停几次，您的元素将遇到奇怪的高度问题。即使使用jQuery 1.7.2，我也观察到这些奇怪的问题。。。你确定版本号吗？我在1.9中遇到了同样的问题。关键是要从

slideDown（）

中删除

.stop（）

。如果它在那里，

jQuery

有时会直接跳到目标高度，“停止”动画。我对jQuery-1.8.3使用

clearQueue（）

或

stop（）

也有同样的问题。。。最后使用

。停止（true，true）

！