YUI 3.x Home -

Site Search (YDN & YUIBlog):

# YUI Library Examples: Animation: Animating Colors

## Animation: Animating Colors

This demonstrates how to animate color attributes.

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 a `from` attribute allows us to reset the colors `onmouseout` using the `reverse` attribute, which we will see below.

    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:'#ffa928',        borderColor: '#71241a'    },     duration:0.5});

    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:'#ffa928',
            borderColor: '#71241a'
        },

        duration:0.5
    });

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:'#ffa928', borderColor: '#71241a' }, duration:0.5 });

### Running the Animation

Next we need a handler to run when the link is moused over, and reverse when moused out.

    var hover = function(e) {    var reverse = false;    if (anim.get('running')) {        anim.pause();    }    if (e.type === 'mouseout') {        reverse = true;    }    anim.set('reverse', reverse);    anim.run();};

    var hover = function(e) {
        var reverse = false;
        if (anim.get('running')) {
            anim.pause();
        }
        if (e.type === 'mouseout') {
            reverse = true;
        }
        anim.set('reverse', reverse);
        anim.run();
    };

var hover = function(e) { var reverse = false; if (anim.get('running')) { anim.pause(); } if (e.type === 'mouseout') { reverse = true; } anim.set('reverse', reverse); anim.run(); };

### Listening for the Events

Finally we add an event handler 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.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:'#ffa928',            borderColor: '#71241a'        },         duration:0.5    });     var hover = function(e) {        var reverse = false;        if (anim.get('running')) {            anim.pause();        }        if (e.type === 'mouseout') {            reverse = true;        }        anim.set('reverse', reverse);        anim.run();    };    node.on('mouseover', hover);    node.on('mouseout', hover);});

    YUI().use('anim-color', 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:'#ffa928',
                borderColor: '#71241a'
            },

            duration:0.5
        });

        var hover = function(e) {
            var reverse = false;
            if (anim.get('running')) {
                anim.pause();
            }
            if (e.type === 'mouseout') {
                reverse = true;
            }
            anim.set('reverse', reverse);
            anim.run();
        };
        node.on('mouseover', hover);
        node.on('mouseout', hover);
    });

YUI().use('anim-color', 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:'#ffa928', borderColor: '#71241a' }, duration:0.5 }); var hover = function(e) { var reverse = false; if (anim.get('running')) { anim.pause(); } if (e.type === 'mouseout') { reverse = true; } anim.set('reverse', reverse); anim.run(); }; node.on('mouseover', hover); node.on('mouseout', hover); });

Copyright © 2010 Yahoo! Inc. All rights reserved.

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