I am attempting to use jquery and CSS to animate the buttons of a navigation sidebar I am using to signify which button is selected when the mouse is hovered over each.

Currently, my code for the CSS appears as such:

#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;}

And my 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>

Before I added the .stop() to each part of the animation, the animation queue would stack up for each time the mouse was moved over each button and then removed. Now that the .stop() has been applied, however, if the mouse is moved away from a button during its animation, the button will freeze and remain in its mid-animation state, unable to be fixed by being hovered over until the page is reloaded, rather than reverting to its original mouseleave state.

From everything I've read, this should not be the case. Might anyone be able to tell why my animation queue becomes broken once the .stop() is applied?