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>
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:'#FF8800',
borderColor: '#BA6200'
},
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);
Complete Example Source
<a href="#" id="demo">hover me</a>
<script type="text/javascript">
YUI().use('anim', 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:'#FF8800',
borderColor: '#BA6200'
},
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);
});
</script>