This demonstrates how to use the end event.

Click the X in the header to fade out the element and remove it from the document once the fade completes.

Setting up the HTML

First we add some HTML to animate.

``` {{>end-event-source-html}} ```

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

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

Handling the End Event

We will need a function to run when the end event fires. Note that the context of our handler defaults to anim, so this refers to our Anim instance inside the handler.

``` var onEnd = function() { var node = this.get('node'); // this === anim node.get('parentNode').removeChild(node); // node is an instance of Node }; ```

Listening for the End Event

Now we will use the on method to subscribe to the end event, passing it our handler.

``` anim.on('end', onEnd); ```

Running the Animation

Finally we add an event handler to run the animation.

``` Y.one('#demo .yui3-remove').on('click', anim.run, anim); ```

Complete Example Source

``` {{>end-event-source}} ```