0N/A<link href="{{componentAssets}}/anim.css" rel="stylesheet" type="text/css">

292N/A<div class="intro">

0N/A <p>This demonstrates how to animate the <code>opacity</code> of an element.</p>

0N/A <p> Click the X in the header to fade the element out.</p>

0N/A</div>

0N/A

0N/A<div class="example">

0N/A{{>basic-source}}

0N/A</div>

0N/A

0N/A<h2>Setting up the HTML</h2>

0N/A<p>First we add some HTML to animate.</p>

0N/A

0N/A```

292N/A<div id="demo" class="yui3-module">

0N/A <div class="yui3-hd">

0N/A <h3>Animation Demo</h3>

0N/A <a href="remove.php?id=demo" title="remove module" class="yui3-remove"><em>x</em></a>

0N/A </div>

0N/A <div class="yui3-bd">

0N/A <p>This an example of what you can do with the YUI Animation Utility.</p>

0N/A <p><em>Follow the instructions above to see the animation in action.</em></p>

0N/A </div>

0N/A</div>

0N/A```

0N/A

0N/A<h2>Creating the Anim Instance</h2>

0N/A<p>Now we create an instance of <code>Y.Anim</code>, passing it a configuration object that includes the <code>node</code> we wish to animate and the <code>to</code> attribute containing the final properties and their values.</p>

0N/A

0N/A```

0N/Avar anim = new Y.Anim({

0N/A node: '#demo',

0N/A to: { opacity: 0 }

0N/A});

0N/A```

0N/A

0N/A<h2>Handling the Click Event</h2>

0N/A<p>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.</p>

0N/A

0N/A```

0N/Avar onClick = function(e) {

0N/A e.preventDefault();

0N/A anim.run();

0N/A};

0N/A```

0N/A

0N/A<h2>Running the Animation</h2>

0N/A<p>Finally we add an event listener to run the animation.</p>

0N/A```

0N/AY.one('#demo .yui3-remove').on('click', onClick);

0N/A```

0N/A

0N/A<h2>Complete Example Source</h2>

0N/A```

0N/A{{>basic-source}}

0N/A```

0N/A