Animation: Basic Animation
+ +
+
+
+
+
+
+ This demonstrates how to animate the opacity of an element.
Click the X in the header to fade the element out.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Animation Demo
+ remove +
+
+This an example of what you can do with the YUI Animation Utility.
+Follow the instructions above to see the animation in action.
+Setting up the HTML
+First we add some HTML to animate.
+
<div id="demo" class="yui-module"> + <div class="yui-hd"> + <h4>Animation Demo</h4> + <a href="remove.php?id=demo" title="remove module" class="yui-remove"><em>x</em></a> + </div> + <div class="yui-bd"> + <p>This an example of what you can do with the YUI Animation Utility.</p> + <p><em>Follow the instructions above to see the animation in action.</em></p> + </div> +</div>
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 final properties and their values.
var anim = new Y.Anim({ + node: '#demo', + to: { opacity: 0 } +});
Handling the Click Event
+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.
+
var onClick = function(e) { + e.preventDefault(); + anim.run(); +};
Running the Animation
+Finally we add an event listener to run the animation.
+
Y.get('#demo .yui-remove').on('click', onClick);
Full Script Source
+
YUI().use('anim-base', function(Y) { + var anim = new Y.Anim({ + node: '#demo', + to: { opacity: 0 } + }); + + var onClick = function(e) { + e.preventDefault(); + anim.run(); + }; + + Y.get('#demo .yui-remove').on('click', onClick); +});
