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 removed from the queue, at which point the next animation becomes first in line, is called, completes, is shifted, and so on until the queue is empty.

There are many cases in which this animation queue, known within jQuery as fx, causes desirable behavior. In the case of hover actions such as ours, though, it needs to be circumvented.