Learning jQuery - Fourth Edition

Observing and interrupting animations

Our basic animation already reveals a problem. As long as there is enough time for the animation to complete after each mouseenter or mouseleave event, the animations proceed as intended. When the mouse cursor moves rapidly and the events are triggered quickly, however, we see that the images also grow and shrink repeatedly, well after the last event is triggered. This occurs because, as discussed in Chapter 4, Styling and Animating, animations on a given element are added to a queue and called in order. The first animation is called immediately, completes in the allotted time, and then is shifted off of the queue, at which point the next animation becomes first in line, is called, completes, is shifted, and ...