Animating Colors

The YUI Animation Utility allows you to animate the colors of an HTMLElement.

The first thing we need to do is load the Animation source file and dependencies:

For this example, we will animate the color (text) and background of a <div> element named demo.

First, a little style so that we can see the animation in action:

Create the demo element and a button to run the animation:

Now we create an instance of YAHOO.util.Anim, passing it the element we wish to animate, and the style attribute(s) to be animated:

The final step is to call the animate method on our instance to start the animation. The button will be the trigger that begins the animation sequence:

This is an example of animating multiple style attributes of an HTMLElement.