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.
+ +<a href="#" id="demo">hover me</a>+ + +
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.
Adding an iterations attribute of "infinite" means that the animation will run continuously.
The direction attribute of "alternate" means that the animation reverses every other iteration.
var node = Y.one('#demo');
+
+var anim = new Y.Anim({
+ node: node,
+ from: {
+ backgroundColor:node.getStyle('backgroundColor'),
+ color: node.getStyle('color'),
+ borderColor: node.getStyle('borderTopColor')
+ },
+
+ to: {
+ color: '#fff',
+ backgroundColor:'#FF8800',
+ borderColor: '#BA6200'
+ },
+
+ duration: 0.5,
+ iterations: 'infinite',
+ direction: 'alternate'
+});
+
+
+Changing Attributes
+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.
var hover = function(e) {
+ var reverse = false,
+ iterations = 'infinite';
+
+ if (anim.get('running')) {
+ anim.pause();
+ }
+ if (e.type === 'mouseout') {
+ reverse = true;
+ iterations = 1;
+ }
+ anim.setAttrs({
+ 'reverse': reverse,
+ 'iterations': iterations
+ });
+
+ anim.run();
+};
+
+
+Running the Animation
+Finally we add event handlers to run the animation.
+ +node.on('mouseover', hover);
+node.on('mouseout', hover);
+
+
+Complete Example Source
+<a href="#" id="demo">hover me</a>
+
+<script type="text/javascript">
+YUI().use('anim', function(Y) {
+ var node = Y.one('#demo');
+
+ var anim = new Y.Anim({
+ node: node,
+ from: {
+ backgroundColor:node.getStyle('backgroundColor'),
+ color: node.getStyle('color'),
+ borderColor: node.getStyle('borderTopColor')
+ },
+
+ to: {
+ color: '#fff',
+ backgroundColor:'#FF8800',
+ borderColor: '#BA6200'
+ },
+
+ duration: 0.5,
+ iterations: 'infinite',
+ direction: 'alternate'
+ });
+
+ var hover = function(e) {
+ var reverse = false,
+ iterations = 'infinite';
+
+ if (anim.get('running')) {
+ anim.stop();
+ }
+
+ if (e.type === 'mouseout') {
+ reverse = true;
+ iterations = 1;
+ }
+
+ anim.setAttrs({
+ 'reverse': reverse,
+ 'iterations': iterations
+ });
+
+ anim.run();
+ };
+
+ node.on('mouseover', hover);
+ node.on('mouseout', hover);
+});
+
+</script>
+
+