<div class="intro">
<p>This demonstrates how to animate the <code>opacity</code> of an element.</p>
<p> Click the X in the header to fade out the element.</p>
</div>
<div class="example">
{{>basic-source}}
</div>
<h2>Setting up the HTML</h2>
<p>First we add some HTML to animate.</p>
```
{{>basic-source-html}}
```
<h2>Creating the Anim Instance</h2>
<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>
```
var anim = new Y.Anim({
node: '#demo',
to: { opacity: 0 }
});
```
<h2>Handling the Click Event</h2>
<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>
```
var onClick = function(e) {
anim.run();
};
```
<h2>Running the Animation</h2>
<p>Finally we add an event listener to run the animation.</p>
```
Y.one('#demo .yui3-remove').on('click', onClick);
```
<h2>Complete Example Source</h2>
```
{{>basic-source}}
```