YUI 3.x Home -

Site Search (YDN & YUIBlog):

# 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.

    <a href="#" id="demo">hover me</a>

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

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

    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();};

    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();
    };

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);

    node.on('mouseover', hover);
    node.on('mouseout', hover);

node.on('mouseover', hover); node.on('mouseout', hover);

### Full Script Source

    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);});

    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);
    });

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); });

Copyright © 2009 Yahoo! Inc. All rights reserved.

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