Animation: Animating Colors
This demonstrates how to animate color attributes.
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>
<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 });
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(); };
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);
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); });
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); });