Question

我有一个悬停在网页右上角的选项框。它的不透明度设置为10％，以免妨碍用户。当它们悬停在（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以终止任何现有动画。你也应该使用悬停而不是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 plugin

Answer 3

我认为您可以使用 stop 方法。

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

Answer 4

在fadein()之前使用停止的问题，例如在此示例中：

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

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

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

停止jQuery动画堆叠

4 个答案: