Should I stop animation before animating the element again in jQuery

Question

Is it necessary to stop an animation, before animating the element again? For example, I am resizing an element from size [200, 200] to [800,800]. Half way between the animation, I want to resize the same element to [600,600] instead of [800,800].

• Should I use .stop() to stop the animation before using the .animate() function on the same element?
• If I do not stop the current animation, will jQuery complete the first animation before executing the second one?

When I call animate(), jQuery automatically adds overflow:hidden; to the element style, and resets the value when the animation gets completed. But if I call .stop() before the animation is over, the property is not reset to its original value.

Answer 1

Whether it's necessary entirely depends on your requirements. Yes, if you don't stop the previous animation, they will be queued. In your example, your element would be fully enlarged to 800x800, then animated to the smaller size of 600x600. It sounds as if you want to stop the previous animation, and clear the fx-queue, before you queue your new animation ($element.stop(true);).

Another example where you most likely would want to clear the animation queue is when you have slide togglers that open/close through user clicks on the same button. When a user rapid-clicks on the button, you don't want your slider to open/close entirely a dozen times. Instead, you would clear the queue on click and then just do one open/close animation.