停止jQuery动画堆叠

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