YUI 3.x Home -

Site Search (YDN & YUIBlog):

# YUI Library Examples: Animation: Basic Animation

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

## Animation: Basic Animation

This demonstrates how to animate the `opacity` of an element.

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

View example in new window.

#### Animation Demo

remove

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.

<div id="demo" class="yui-module"> <div class="yui-hd"> <h4>Animation Demo</h4> <a href="remove.php?id=demo" title="remove module" class="yui-remove"><em>x</em></a> </div> <div class="yui-bd"> <p>This an example of what you can do with the YUI Animation Utility.</p> <p><em>Follow the instructions above to see the animation in action.</em></p> </div> </div>

### 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.

var anim = new Y.Anim({ node: '#demo', to: { opacity: 0 } });

### 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.

var onClick = function(e) { e.preventDefault(); anim.run(); };

### Running the Animation

Finally we add an event listener to run the animation.

Y.get('#demo .yui-remove').on('click', onClick);

### Full Script Source

YUI().use('anim-base', function(Y) { var anim = new Y.Anim({ node: '#demo', to: { opacity: 0 } }); var onClick = function(e) { e.preventDefault(); anim.run(); }; Y.get('#demo .yui-remove').on('click', onClick); });

Copyright © 2009 Yahoo! Inc. All rights reserved.

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