YUI 3.x Home -

Site Search (YDN & YUIBlog):

# YUI Library Examples: Animation: Animating Colors

Note: This is YUI 3.x. Looking for YUI 2.x?

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

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

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

### Listening for the Events

Finally we add an event handler to run the animation.

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 }); 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 © 2009 Yahoo! Inc. All rights reserved.

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