19

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

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

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

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

4

7 回答 7

32

我相信您应该能够只添加一个 .stop() ，它会为您解决这个问题：

onmouseover: function() { 
this.find('.details', this).stop().slideDown(); 
},
onmouseout: function() { 
this.find('.details', this).stop().slideUp(); 
}
于 2010-03-02T00:57:24.997 回答
21

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

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

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

于 2011-07-21T20:03:41.333 回答
8

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

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

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

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

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

于 2010-03-02T01:04:40.313 回答
6

如果你把参数放进去也更好stop()，就像这样：stop(true,true)...

于 2010-07-27T08:42:38.887 回答
4

就我而言，我也在寻找一种.stop()解决上下大量动画队列的方法。但是还是没有解决，因为不顺畅，而且有bug，让它不能再滑下去了。

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

$("#trigger").on({
    mouseover: function() {
        $("#animationTarget").not(":animated").slideDown();
    },
    mouseleave: function() {
        $("#animationTarget").not(":animated").slideUp();
    }
});
于 2014-04-09T18:19:09.560 回答
1

You could do something like the following: 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-17T18:45:56.990 回答
0

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

停止（真，假）
你可以达到没有错误的效果。

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

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

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

于 2015-11-14T06:28:13.317 回答