1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<link href="{{componentAssets}}/anim.css" rel="stylesheet" type="text/css">
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<div class="intro">
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney <p>This demonstrates how to animate color attributes.</p>
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney <p>Mouse over the link to begin the animation.</p>
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<div class="example">
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney{{>colors-source}}
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<h2>Setting up the HTML</h2>
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<p>First we add some HTML to animate.</p>
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<a href="#" id="demo">hover me</a>
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<h2>Creating the Anim Instance</h2>
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<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>
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<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>
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeneyvar node = Y.one('#demo');
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeneyvar anim = new Y.Anim({
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney backgroundColor:node.getStyle('backgroundColor'),
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney color: node.getStyle('color'),
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney borderColor: node.getStyle('borderTopColor')
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney color: '#fff',
3883a992e58e3629e15903ab299e20fce8483e2cJeff Conniff backgroundColor:'#FF8800',
3883a992e58e3629e15903ab299e20fce8483e2cJeff Conniff borderColor: '#BA6200'
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney duration:0.5
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<h2>Running the Animation</h2>
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<p>Next we need a handler to run when the link is moused over, and reverse when moused out.</p>
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeneyvar hover = function(e) {
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney var reverse = false;
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney if (anim.get('running')) {
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney if (e.type === 'mouseout') {
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney reverse = true;
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney anim.set('reverse', reverse);
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<h2>Listening for the Events</h2>
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<p>Finally we add an event handler to run the animation.</p>
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeneynode.on('mouseover', hover);
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeneynode.on('mouseout', hover);
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<h2>Complete Example Source</h2>
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney{{>colors-source}}