When I made the DHTML Menu about a year ago I wanted to add some nice animations when displaying the menus. At the beginning I just skipped the animation but a few months (maybe it was weeks) later I started to create an animation library that should animate the menus just like they are animated in Windows 98.

Basics of Animations

The secret behind animations in DHTML are timers. By setting a timer I can update the object at a frequent interval and thus I have the basics of an animation. There are two methods to create these timers. The first is to use one single timeout and when this is done call a function that sets a new timeout. This is done with the following:

var myTimeout = window.setTimeout("foo()",500);
// The 500 stands for 500 ms = 0.5 s

The other way is to use an iterator. This calls the same function at an even interval with the period that you gave it as the second argument. Like this:

var myInterval = window.setInterval("foo()",500);

Both of these methods return a pointer to the timeout/interval so that you later can stop it with the following:

window.clearTimeout(myTimeout);
window.clearInterval(myInterval);

I've found that the best way is to use the setTimeout method and pass a variable that is increased after each call. But there is an actual problem with these methods and that is that the argument is a string that gets evaluated by the timer, so if you want to pass a variable you have to convert it to a string. This is easily done with ordinary variables like numbers and strings but when you want to pass unnamed object you have to do some extra work. (Maybe I'll do an article of how I've solved this.)

Basics of Animations
The Swipe Animation
The Fade Animation
Mozilla Swipe and Fade

Author: Erik Arvidsson