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

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

1276N/A <p>This demonstrates how to use the <code>end</code> event.</p>

294N/A <p> Click the X in the header to fade the element out and remove it from the document once the fade completes.</p>

1597N/A</div>

294N/A

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

919N/A{{>end-event-source}}

919N/A</div>

919N/A

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

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

919N/A

919N/A```

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

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

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

919N/A <a title="remove module" class="yui3-remove"><em>x</em></a>

919N/A </div>

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

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

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

919N/A </div>

919N/A</div>

294N/A```

294N/A

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

294N/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 properties to be transitioned and final values.</p>

493N/A

294N/A```

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

977N/A node: '#demo',

970N/A to: { opacity: 0 }

970N/A});

1356N/A```

1356N/A

1356N/A<h2>Handling the End Event</h2>

294N/A<p>We will need a function to run when the <code>end</code> event fires. Note that the context of our handler defaults to <code>anim</code>, so <code>this</code> refers to our Anim instance inside the handler.</p>

1549N/A

294N/A```

911N/Avar onEnd = function() {

1549N/A var node = this.get('node'); // this === anim

1549N/A node.get('parentNode').removeChild(node); // node is an instance of Node

1549N/A};

911N/A```

294N/A

1276N/A<h2>Listening for the End Event</h2>

1276N/A<p>Now we will use the <code>on</code> method to subscribe to the <code>end</code> event, passing it our handler.</p>

294N/A

294N/A```

1276N/Aanim.on('end', onEnd);

493N/A```

294N/A

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

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

970N/A```

970N/AY.one('#demo .yui3-remove').on('click', anim.run, anim);

1597N/A```

1597N/A

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

851N/A```

970N/A{{>end-event-source}}

970N/A```

970N/A