Question

我有一个界面，它大量使用jQuery 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();
});

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

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

在this主题中发布了类似的查询。使用

stop（true，false）

你可以在没有错误的情况下达到效果。

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

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

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

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

7 个答案: