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

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();
});

您希望trues停止,因为这些清除了挂起的动画队列.如果你不使用这些,你会发现快速移动鼠标并反复穿过元素会产生错误的结果.

Answer 3

一般来说,你想stop()在开始这样的动画时打电话:

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

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

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

此外,如果您正在设置这些,mouseover()并且mouseout()简单地使用该hover()事件可以说更清楚.

Answer 4

如果你输入参数也会好得多stop(),就像这样:stop(true,true)...