Animation: Animating Colors
This demonstrates how to animate color attributes.
Mouse over the link to begin the animation.
Setting up the HTML
First we add some HTML to animate.
Creating the Anim Instance
Now we create an instance of Y.Anim, passing it a configuration object that includes the node we wish to animate and the to attribute containing the final properties and their values.
Adding a from attribute allows us to reset the colors onmouseout using the reverse attribute, which we will see below.
Running the Animation
Next we need a handler to run when the link is moused over, and reverse when moused out.
Listening for the Events
Finally we add an event handler to run the animation.