Animation Utility: Alternating Iterations
This demonstrates how to use the
iterations attribute to run multiple iterations of the animation.
Mouse over the link to begin the animation.
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.
iterations attribute of "infinite" means that the animation will run continuously.
direction attribute of "alternate" means that the animation reverses every other iteration.
We don't want the animation running when the link is not hovered over, so we will change the animation attributes depending on whether or not we are over the link.
We can use a single handler for both mouse the mouseOver and mouseOut events, and set the
reverse attribute depending on which event fired.
Running the Animation
Finally we add event handlers to run the animation.