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.
+ + +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.
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.
+ + +Running the Animation
+Finally we add an event listener to run the animation.
+ + +