jQuery 1.4 Animation Techniques - Index of

Managing Animations
Time for action – preventing animation build-up using
the stop method
In Chapter 2, Fading Animations, we used the fadeIn() method to enhance CSS hover
states, but we didn't hide the hover state using fadeOut(). The reason for this is because
the animations can quickly build up. If the mouse pointer is moved on and off one of the
links repeatedly, the hover state will continue to fade in and out even after the mouse
pointer moves away.
Fortunately, we can use the stop() method to prevent this from happening. In this section,
we'll add fadeOut() effects to the navigation menu example from Chapter 2, Fading
Animations and use the stop() method to prevent an effect build-up.
1. In fadeIn.html, change the hover() method so that it appears as follows:
ul.find("a").hover(function() {
$(this).find("span").stop(true, true).fadeIn("slow");
}, function() {
$(this).find("span").stop(true, true).fadeOut("slow");
});
2. Save this file as stop.html.
What just happened?
By calling the stop() method directly before applying the fadeIn() effect, we ensure that
a build-up of effects does not occur and spoil the hover states. In order for the effects to work
correctly, we supply true as the values of both the clear queue and jump to end arguments.
Pop quiz – stopping an animation
1. What does the first argument that can be passed to the stop() method determine?
a. Whether or not the method should return false
b. Whether or not the element should be removed from the page
c. Whether or not the queue should be cleared
d. Whether or not the queue should be replaced
2. What does the second argument control?
a. Whether or not the queue is cleared
b. Whether or not the method returns the queue as an array
c. Whether the element should be removed from the page
d. Whether the element should be set to its final state
[ 68 ]