jquery simple menu roll-over (without animation queue)

Question

I have a simple unordered list with list items as menu item i created the jquery just to have a funny rollover effect being:

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

the problem with this script is, if you rush over the menu several times, an animation queue builds up. i tried to use .stop() in between, but then it also stops the animations from the other list items which should return to default state in any case. is there a way to stop() the queue per item? but not for the whole list?

Answer 1

I don't see why $(this).stop().animate(...) is not working for you, but you can also try this approach:

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

which will only trigger the animation on elements that are not currently animated