52N/A<link href="{{componentAssets}}/anim.css" rel="stylesheet" type="text/css">

52N/A<div class="intro">

52N/A <p>This demonstrates how to animate color attributes.</p>

52N/A <p>Mouse over the link to begin the animation.</p>

52N/A</div>

52N/A

52N/A<div class="example">

52N/A{{>colors-source}}

52N/A</div>

52N/A

52N/A<h2>Setting up the HTML</h2>

52N/A<p>First we add some HTML to animate.</p>

52N/A

52N/A```

52N/A<a href="#" id="demo">hover me</a>

52N/A```

52N/A

52N/A<h2>Creating the Anim Instance</h2>

52N/A<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>

52N/A<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>

52N/A

52N/A```

52N/Avar node = Y.one('#demo');

52N/A

52N/Avar anim = new Y.Anim({

52N/A node: node,

52N/A from: {

52N/A backgroundColor:node.getStyle('backgroundColor'),

52N/A color: node.getStyle('color'),

52N/A borderColor: node.getStyle('borderTopColor')

52N/A },

52N/A

52N/A to: {

52N/A color: '#fff',

52N/A backgroundColor:'#FF8800',

52N/A borderColor: '#BA6200'

52N/A },

5N/A

5N/A duration:0.5

5N/A});

5N/A```

5N/A

15N/A<h2>Running the Animation</h2>

15N/A<p>Next we need a handler to run when the link is moused over, and reverse when moused out.</p>

15N/A```

15N/Avar hover = function(e) {

5N/A var reverse = false;

5N/A if (anim.get('running')) {

15N/A anim.pause();

5N/A }

5N/A if (e.type === 'mouseout') {

5N/A reverse = true;

5N/A }

15N/A anim.set('reverse', reverse);

15N/A anim.run();

44N/A};

44N/A```

44N/A

15N/A<h2>Listening for the Events</h2>

15N/A<p>Finally we add an event handler to run the animation.</p>

5N/A```

node.on('mouseover', hover);

node.on('mouseout', hover);

```

<h2>Complete Example Source</h2>

```

{{>colors-source}}

```