jquery simple menu roll-over (animation queue question)

Question

I have a simple unordered list with listitems as menu item i created the jquery just to have a funny rolover effect beeing:

$('#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() inbetween, but then it also stops the animations from the other listitems 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?

Sander

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

Answer 2

hi, could you please tell me how to where in your code use the .stop()? or where exactly the "$(":not(:animated)", this).animate(...)" one? thanks... gabe