jquery - 为什么我无法在不破坏代码的情况下阻止动画队列堆叠？

Question

我正在尝试使用 jquery 和 CSS 为导航侧边栏的按钮设置动画，我使用它来表示当鼠标悬停在每个按钮上时选择了哪个按钮。

目前，我的 CSS 代码显示如下:

#navbutton {position:relative; width:178px; height:35px; border:1px #FFF solid; z-index:+3; font-family:'Capriola', sans-serif; font-size:18px; text-align:center;}

#navbutton.button {color:#77D; background-color: #F0B0D0;}
#navbutton.button_hover {color:#66C; background-color: #FCF; padding:10px;}

还有我的jquery:

<script type="text/javascript">
$(document).ready(function(){

$("#sidebar div").mouseenter(buttonHover) 

function buttonHover(){
    $(this).stop().switchClass('button','button_hover',500);
    }

$("#sidebar div").mouseleave(button)

function button(){
    $(this).stop().switchClass('button_hover','button',500);
    }   

});
</script>

在我将 .stop() 添加到动画的每个部分之前，每次将鼠标移到每个按钮上然后移除时，动画队列都会堆积起来。现在已经应用了 .stop() ，但是，如果鼠标在动画期间从按钮上移开，该按钮将卡住并保持在其动画中间状态，无法通过将鼠标悬停在页面上来修复重新加载，而不是恢复到其原始的 mouseleave 状态。

从我读过的所有内容来看，情况不应该如此。谁能说出为什么在应用 .stop() 后我的动画队列会被破坏？

Answer 1

使用.stop(true,true)让它走到当前动画的末尾，否则它会在原处停止。

http://api.jquery.com/stop/