One of the more popular Ajax effects is the color flash or fade (to differentiate the effect from the Adobe functionality) that signals some form of successful (or not) update. Usually these are associated with data updates, but they can be used for any activity where you want to signal to the application user to pay attention that something is happening.
A fade changes the background color of an element or group of elements, moving from a darker shade to a lighter, and typically back again. The fade can consist of variations of one color, such as flashing red to signal a deletion, or a yellow fade to create a highlight. Multiple colors can also be used, for instance, a blue to yellow fade to signal a positive outcome.
Regardless of the exact effect used, one thing all color fades require is the use of timers to create the necessary animation. Before getting into the code necessary to implement a fade, we'll do a quick refresher on timers and animation.
If you're comfortable with your understanding of timers and animations, feel free to skip the next section.
Timers and Animations
Example 4-11. Straight, simple, and uncomplicated timer function
The approach is simple, but an issue with it is that using object methods rather than discrete functions means the timer doesn't have a way of passing the objects context along with the method, as the parameter to setTimeout.
With the increased interest in Ajax, and especially through the development of libraries such as Prototype, the look of setTimeout has changed significantly--enough to make it difficult to understand exactly what's happening. The next section looks at Prototype's use of setTimeout, and then implements the same functionality separate from the library to demonstrate the Ajaxian influence on timers and timer event handlers.