JQuery simple menu switch (no animation queue)

Question

I have a simple unordered list with list items as a menu item I created jquery just to have a fun rollover effect:

$('#nav ul ul li').hover(function(){
$(this).animate({ 
        marginLeft: "20px",
      }, 300 );
}, function(){
$(this).animate({ 
        marginLeft: "0px",
      }, 300 );
});

The problem with this script is that if you rush through the menu several times, an animation queue is created. I tried using .stop () between them, but then it also stops the animation from other list items, which should return to their default state anyway. is there a way to stop () the queue on an element? but not for the whole list?

Answer 1

, $(this) .stop().animate(...) , :

$(":not(:animated)", this).animate(...)

,