Question

heres a problem of jQuery that has been haunting me for a long time, and I want to finally find a solution. Havng this code:

http://jsfiddle.net/MDfgd/20/

If I move my mouse quickly through all the objects, the animation breaks, as it doesn’t unfold completely. How could I do it so that this doesnt happen?

I tried “stop(true, true)”, but this makes the animation lose its smoothness, since it jumps to the end of the animation Queue.

Thanks.

Answer 1

I think what he means is that if he moves the mouse over and out in a quick manner, he doesn’t want the animations to stack up infinitely. However doing .stop() will result in the current animation being stopped instantly, instead of letting the current animation to run its course and removing the rest of the animations from the queue. Doing .stop(true, true) will jump to the end of the current animation and continue from there.

What the OP wants, I think, is to let the current animation to run through, and after that start the next animation, instead of stacking up the animations infinitely in case of fast mouse movement.

One way to achieve that is to keep track of the currently animating element yourself. This shows one way to achieve what you want:

http://jsfiddle.net/ZrdV6/

EDIT

Ok after clarification I made another example. This basically prevents the height from getting messed up by using stop() on an element that is being animated by slideDown() and slideUp().

The trick is to do the animation yourself with .animate(), and to keep track of the original height yourself.

http://jsfiddle.net/YmwZa/1/