diff -r 000000000000 -r 40c8f766c9b8 src/cm/media/js/lib/yui/yui3.0.0/examples/anim/alt-iterations.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/cm/media/js/lib/yui/yui3.0.0/examples/anim/alt-iterations.html Mon Nov 23 15:14:29 2009 +0100 @@ -0,0 +1,363 @@ + + + + + YUI Library Examples: Animation: Alternating Iterations + + + + + + + + + + + + +
+
+
+

+ + YUI 3.x Home - + +

+
+ + +
+ + + +
+
+
+
+

YUI Library Examples: Animation: Alternating Iterations

+
+
+ + +
+
+
+
+ +

Animation: 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.

+ +
+ +
+
+

+ View example in new window. +

+
+ + + + + +hover me + + + + + +
+
+
+ +

Setting up the HTML

+

First we add some HTML to animate.

+
  1. <a href="#" id="demo">hover me</a>
<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.

+ +
  1. var node = Y.get('#demo');
  2.  
  3. var anim = new Y.Anim({
  4.     node: node,
  5.     from: {
  6.         backgroundColor:node.getStyle('backgroundColor'),
  7.         color: node.getStyle('color'),
  8.         borderColor: node.getStyle('borderTopColor')
  9.     },
  10.  
  11.     to: {
  12.         color: '#fff',
  13.         backgroundColor:'#ffa928',
  14.         borderColor: '#71241a'
  15.     },
  16.  
  17.     duration: 0.5,
  18.     iterations: 'infinite',
  19.     direction: 'alternate'
  20. });
var node = Y.get('#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:'#ffa928',
+        borderColor: '#71241a'
+    },
+ 
+    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.

+
  1. var hover = function(e) {
  2.     var reverse = false,
  3.         iterations = 'infinite';
  4.  
  5.     if (anim.get('running')) {
  6.         anim.pause();
  7.     }
  8.     if (e.type === 'mouseout') {
  9.         reverse = true;
  10.         iterations = 1;
  11.     }
  12.     anim.setAttrs({
  13.         'reverse': reverse,
  14.         'iterations': iterations
  15.     });
  16.  
  17.     anim.run();
  18. };
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.

+
  1. node.on('mouseover', hover);
  2. node.on('mouseout', hover);
node.on('mouseover', hover);
+node.on('mouseout', hover);
+

Full Script Source

+
  1. YUI().use('anim-color', function(Y) {
  2.     var node = Y.get('#demo');
  3.  
  4.     var anim = new Y.Anim({
  5.         node: node,
  6.         from: {
  7.             backgroundColor:node.getStyle('backgroundColor'),
  8.             color: node.getStyle('color'),
  9.             borderColor: node.getStyle('borderTopColor')
  10.         },
  11.  
  12.         to: {
  13.             color: '#fff',
  14.             backgroundColor:'#ffa928',
  15.             borderColor: '#71241a'
  16.         },
  17.  
  18.         duration: 0.5,
  19.         iterations: 'infinite',
  20.         direction: 'alternate'
  21.     });
  22.  
  23.     var hover = function(e) {
  24.         var reverse = false,
  25.             iterations = 'infinite';
  26.  
  27.         if (anim.get('running')) {
  28.             anim.pause();
  29.         }
  30.         if (e.type === 'mouseout') {
  31.             reverse = true;
  32.             iterations = 1;
  33.         }
  34.         anim.setAttrs({
  35.             'reverse': reverse,
  36.             'iterations': iterations
  37.         });
  38.  
  39.         anim.run();
  40.     };
  41.  
  42.     node.on('mouseover', hover);
  43.     node.on('mouseout', hover);
  44. });
YUI().use('anim-color', function(Y) {
+    var node = Y.get('#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:'#ffa928',
+            borderColor: '#71241a'
+        },
+ 
+        duration: 0.5,
+        iterations: 'infinite',
+        direction: 'alternate'
+    });
+ 
+    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();
+    };
+ 
+    node.on('mouseover', hover);
+    node.on('mouseout', hover);
+});
+
+ + + + +
+
+

More Animation Resources:

+
+
+ +
+
+
+
+ +
+
+ + + +
+ +
+

Copyright © 2009 Yahoo! Inc. All rights reserved.

+

Privacy Policy - + Terms of Service - + Copyright Policy - + Job Openings

+
+
+ + + + + +