停止jQuery动画堆叠

我有一个hover在网页右上角的选项框。 它的不透明度设置为10％，以免妨碍用户。 当它们hover在（mouseenter）上时，我使用jQuery将其淡入并滑入内容（并在mouseout上反向）。

如果他们反复这样做，虽然动画堆叠起来，你有时可能会留在鼠标静止不动但盒子在你周围溜溜的情况。

我怎样才能解决这种情况？

这是我目前设置动画的方式

$("#dropdown").mouseenter(function() { $(this).fadeTo('fast',1); $("#options").slideDown(); }); $("#dropdown").mouseleave(function() { $(this).fadeTo('fast',0.1); $("#options").slideUp(); }); 

注意我只使用jQuery而不是任何其他插件。

Answer 1

在开始新动画之前，调用stop来终止任何现有动画。 你也应该使用hover而不是mouseenter / mouseleave。

 $("#dropdown").hover(function() { $(this).stop().fadeTo('fast',1); $("#options").stop().slideDown(); }, function() { $(this).stop().fadeTo('fast',0.1); $("#options").stop().slideUp(); }); 

Answer 2

您可以使用stop方法停止动画并清除动画队列。

 $("#dropdown").mouseenter(function() { $(this).stop(true).fadeTo('fast',1); $("#options").stop(true).slideDown(); }); $("#dropdown").mouseleave(function() { $(this).stop(true).fadeTo('fast',0.1); $("#options").stop(true).slideUp(); }); 

您也可以查看hoverintent插件

Answer 3

在fadein()之前使用stop的问题，例如在这个例子中：

 $("#button").hover(function () { $("#light").stop().fadeIn(); }, function () { $("#light").stop().fadeOut(); }); 

当hover状态改变时，stop（）将在元素已消失的任何不透明度下具有淡出停止，并且当再次hover时将以相同的不透明度开始。

结果是多次快速徘徊最终会淡化元素并且不会再次淡入。

Answer 4

你可以在那里使用stop方法。

停止匹配元素上当前运行的动画。