1. Think of what color you want the div to change to. Normally, you will want the background color (backgroundColor) to change to the same color. To do this, just like in creating motion, declare a variable and make an object. In this example, the variable is called “attributes”. The important part is to declare the color and backgroundColor in the attributes. Use the hexadecimal value for specifying the color. What color do you think the div will change to?

var attributes = {
   color: { to: '#0000FF' },
   backgroundColor: { to: '#0000FF' }
};

2. Make a new YAHOO.util.ColorAnim object. Here we are making a new variable called “anim.” This will be the YUI ColorAnim object. The most important part is to define in the arguments of the ColorAnim function two things: a) which object is going to be changing color (supply a reference or an id), and b) the name of the variable holding the attributes of the color change.

var anim = new YAHOO.util.ColorAnim('demo', attributes);

3. Say when you want the animation to begin by using the animate() function.

anim.animate();

On the next page, you will have a chance to experiment with different hexadecimal colors. However, pay attention to the rest of the code as well since you will be quizzed on it after your time to play.