colors.mustache revision 1f08a8488664773a7d96fa3a043a639692d2a5cb
<div class="intro">
<p>This demonstrates how to animate color attributes.</p>
<p>Mouse over the link to begin the animation.</p>
</div>
<div class="example">
{{>colors-source}}
</div>
<h2>Setting up the HTML</h2>
<p>First we add some HTML to animate.</p>
```
<a href="#" id="demo">hover me</a>
```
<h2>Creating the Anim Instance</h2>
<p>Now we create an instance of <code>Y.Anim</code>, passing it a configuration object that includes the <code>node</code> we wish to animate and the <code>to</code> attribute containing the final properties and their values.</p>
<p>Adding a <code>from</code> attribute allows us to reset the colors <code>onmouseout</code> using the <code>reverse</code> attribute, which we will see below.</p>
```
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
});
```
<h2>Running the Animation</h2>
<p>Next we need a handler to run when the link is moused over, and reverse when moused out.</p>
```
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();
};
```
<h2>Listening for the Events</h2>
<p>Finally we add an event handler to run the animation.</p>
```
node.on('mouseover', hover);
node.on('mouseout', hover);
```
<h2>Complete Example Source</h2>
```
{{>colors-source}}
```