Example: Basic Animation

Setting up the HTML

First we add some HTML to animate.

<div id="demo" class="yui3-module">
 <div class="yui3-hd">
 <h3>Basic Animation</h3>
 <a href="remove.php?id=#demo" title="fade out element" class="yui3-remove"><em>x</em></a>
 </div>
 <div class="yui3-bd">
 <p>Click the X in the header to fade out the element.</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.one('#demo .yui3-remove').on('click', onClick);

Complete Example Source

<div id="demo" class="yui3-module">
 <div class="yui3-hd">
 <h3>Basic Animation</h3>
 <a href="remove.php?id=#demo" title="fade out element" class="yui3-remove"><em>x</em></a>
 </div>
 <div class="yui3-bd">
 <p>Click the X in the header to fade out the element.</p>
 </div>
</div>
<script type="text/javascript">
YUI().use('anim', function(Y) {
 var anim = new Y.Anim({
 node: '#demo',
 to: { opacity: 0 }
 });
 var onClick = function(e) {
 e.preventDefault(); 
 anim.run();
 };
 Y.one('#demo .yui3-remove').on('click', onClick);
});
</script>