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.
+The End Event
+ x +Click the X in the header to fade out the element and remove it from + the document once the fade completes.
+This is placeholder text used to demonstrate how the above animation affects subsequent content.
+ + + + +Setting up the HTML
+First we add some HTML to animate.
+ +<div id="demo" class="yui3-module"> + <div class="yui3-hd"> + <h3>The End Event</h3> + <a title="fade then remove 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 and remove it from + the document once the fade completes.</p> + </div> +</div> +<p>This is placeholder text used to demonstrate how the above animation affects subsequent content.</p>+ + +
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
+<div id="demo" class="yui3-module">
+ <div class="yui3-hd">
+ <h3>The End Event</h3>
+ <a title="fade then remove 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 and remove it from
+ the document once the fade completes.</p>
+ </div>
+</div>
+<p>This is placeholder text used to demonstrate how the above animation affects subsequent content.</p>
+
+
+<script type="text/javascript">
+YUI().use('anim', function(Y) {
+ var anim = new Y.Anim({
+ node: '#demo',
+ to: { opacity: 0 }
+ });
+
+ var onEnd = function() {
+ var node = this.get('node');
+ node.get('parentNode').removeChild(node);
+ };
+
+ anim.on('end', onEnd);
+
+ Y.one('#demo .yui3-remove').on('click', anim.run, anim);
+
+});
+</script>
+
+