JavaScript® 24-Hour Trainer

Chapter 25. Timers and Animating Elements

Users have come to expect a certain level of polish in the applications they use — particularly their operating systems. Every new version adds more visual goodness that, while not entirely necessary, enhances the user's experience. Features like menus that fade in and out, and windows that scale while maximizing and minimizing, are perfect examples of how unobtrusive animations can add visual flair while still maintaining the original functionality of showing or hiding a menu or resizing a window.

In Lesson 24 you allowed a user to click an element and drag it to wherever he wishes; you essentially wrote an animation script. The animation was limited and dependent upon the user's action, but the element moved to a different set of coordinates in sync with the mouse pointer — a movement animation.

Animations such as the fading in and out in menus aren't so dependent on user interaction. Sure, the user has to initiate an event to cause the animation to run, but a menu fades in over a certain period — not in relation to where the user moves the mouse pointer.

This type of animation is akin to motion pictures or cartoons — a character's fluid movement is broken into a number of frames that are shown in rapid sequence. Each frame is shown for a certain time (usually one thirtieth of a second) to mimic movement on the screen.

On a web page, you modify an element (the character) bit-by-bit (or frame by frame) over a certain period using timers. In ...