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

我有一个接口，大量使用jQuery slideUp和slideDown效果以三态方式展开项目。取消所有排队的jQuery slideUp和slideDown动画

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

然而，当用户在这些界面元素快速移动鼠标动画跟不上和项目将被上下滑动后不久鼠标已经离开界面区域。

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

来源

2010-03-02 Candidasa

我相信你应该能够只需添加一个.stop（），它会照顾的，对你：

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

来源

2010-03-02 00:57:24

此外，请确保您使用的是jQuery 1.7.2或更高版本，因为之前在使用slideUp（）和slideDown（）时使用stop（）时会出现错误，如果您在几次之内快速悬停和关闭，你的元素会遭遇奇怪的高度问题。 – jackocnr 2012-05-11 20:15:08

即使使用jQuery 1.7.2，我也观察到这些奇怪的问题...你确定版本号吗？ – 2012-09-17 15:29:14

我在1.9中遇到同样的问题。关键是从'slideDown（）'中移除'.stop（）'。如果它在那里，'jQuery'有时会直接跳到目标高度，“停止”动画。 – jclancy 2013-08-02 18:31:06

一般来说你要调用stop()开始这样的动画时：

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

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

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

此外，如果您将这些设置为mouseover()和mouseout()，则可以更简单地使用hover()事件来代替。

来源

2010-03-02 01:04:40 cletus

它也好得多，如果你把参数stop()，就像这样：stop(true,true) ...

来源

2010-07-27 08:42:38 user403151

你真的想答案是所有其他三个答案的组合。

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

您希望true s停止，因为它们会清除挂起的动画队列。如果你不使用这些，你会发现在元素上快速移动鼠标会产生错误的结果。

来源

2011-07-21 20:03:41

在我的情况下，我也在寻找一个.stop()解决方案，以扩大和缩小广泛的动画队列。然而，它仍然没有解决，因为它不是光滑的，它是越野车，使它不再滑落。

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

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

来源

2014-04-09 18:19:09 falsarella

你可以做类似如下：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; 
}

来源

2015-04-17 18:45:56 maudulus

类似的查询被张贴在this线程。使用

stop（true，false）

您可以达到无bug的效果。

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

我认为还有就是你想放滑和幻灯片向下动画元素后#YourDiv。

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

来源

2015-11-14 06:28:13

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

回答

相关问题