YUI 3.x Home -

YUI Library Examples: Animation Utility: Basic Animation

Note: This is YUI 3.x. Looking for YUI 2.x?

Animation Utility: Basic Animation

This demonstrates how to animate the opacity of an element.

Click the X in the header to fade the element out.

Animation Demo


This an example of what you can do with the YUI Animation Utility.

Follow the instructions above to see the animation in action.

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.

Handling the Click Event

Clicking the toggle control should start the animation, so we'll need to handle that click, including preventing the default action of following the url.

Running the Animation

Finally we add an event listener to run the animation.

Full Script Source

Copyright © 2008 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings