Observing and interrupting animations
Our basic animation already reveals a problem. As long as the user is careful about drawing the mouse over and out of the images slowly and avoiding triggering repeated mouseenter and mouseleave events too quickly, the animations proceed as intended. When the events are triggered quickly and repeatedly, 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, 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 the queue. At this 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, is desirable. In the case of hover actions such as ours, though, it needs to be circumvented.
