jQuery 1.4 Animation Techniques Beginner's Guide

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: ...