jquery - 停止 jQuery 动画堆叠

Question

我有一个选项框悬停在网页的右上角。它的不透明度设置为 10%，以免妨碍用户。当他们将鼠标悬停在(鼠标输入)上时，我使用 jQuery 使其淡入并向下滑动内容(鼠标移出时则相反)。

如果他们重复执行此操作，尽管动画会叠加，有时您可能会陷入鼠标静止不动但盒子却在溜溜球的情况。

如何解决这种情况？

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

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