Jquery queue/ .stop() problems

I am having some problems using .stop() to prevent functions from queueing up. If I use .stop() or a variation thereof the function dies after hover:out and will not restart.

You can see my code and the source here: http://joepolitic.com/zkmpract.html. Only the last menu item (c) has the .stop() on it, the rest have don't have it yet.

$('li.co开发者_运维技巧ntact').hover(  
 function() {  
  $(this).stop().toggleClass('li contactb', 800);  
 },  
 function() {  
  $(this).stop().toggleClass('li contactb', 800);  
 }  
);

The problem is caused by the way that toggleClass works with a duration. During the animation the height is being set directly on the element. Once the animation is complete the height is removed and the class is added. When you stop the animation pre-maturely, the height remains directly on the element which overrides the css class. This is why it appears to just not work because adding and removing the class does not affect the height if there is an inline style.

The only way I can think to fix this would be to not use toggleClass and use animate directly. If you don't want to set the initial height, you can just save the height in data prior to animation and pull it out when you want to set it back:

http://jsfiddle.net/yCAYw/1/

$("div").hover(function(){
    var $this=$(this);

    $this.data("height",$this.height());
    $this.stop().animate({"height":"200px"},1000); 
},function(){
    var $this=$(this);

    $this.stop().animate({"height":$this.data("height")},1000); 
});