jQuery's stop() seems to be blocking animations that haven't been queued yet

Question

How does jQuery's stop() actually work?

If you look here (http://jsfiddle.net/hWTT6/), when you hover over the main blue box it should fade to red, and when you hover off it should fade back. The problem is it will completely fade to red (and then back to blue) even if the mouse has hovered off before the first fade was complete. The problem can more clearly be seen with the slide effect. Hover over the slide "button" and the main box will slide to blue, hover off, it will slide back. But try hovering on and off and on and off, before the first animation has completed. You'll see that all four animations are carried out. I included both examples here to show it is not just a problem with one effect or something.

I thought this would be easily fixed by adding a stop before the animations, as shown commented out in the code. But, if I do this the current animation will stop and the following one will never start. Almost as though stop is blocking an animation that is occurring after the call to stop.

What am I missing here?

Thanks.

Answer 1

You are missing that .stop() accepts two arguments. Both boolean, indicating:

- clearQueue (first)
- jumpToEnd (second)

So by calling $('#foo').stop( true, true ).doSomeOtherStuff() you should get your desired goal.

Reference: .stop()