1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<link href="{{componentAssets}}/anim.css" rel="stylesheet" type="text/css">
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<div class="intro">
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney <p>This demonstrates how to use the <code>iterations</code> attribute to run multiple iterations of the animation.</p>
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney <p>Mouse over the link to begin the animation.</p>
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<div class="example">
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney{{>alt-iterations-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 an <code>iterations</code> attribute of "infinite" means that the animation will run continuously.</p>
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<p>The <code>direction</code> attribute of "alternate" means that the animation reverses every other iteration.</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 iterations: 'infinite',
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney direction: 'alternate'
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<h2>Changing Attributes</h2>
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<p>We don't want the animation running when the link is not hovered over, so we will change the animation attributes depending on whether or not we are over the link.</p>
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<p>We can use a single handler for both mouse the mouseOver and mouseOut events, and set the <code>reverse</code> attribute depending on which event fired.</p>
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeneyvar hover = function(e) {
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney var reverse = false,
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney iterations = 'infinite';
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney if (anim.get('running')) {
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney if (e.type === 'mouseout') {
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney reverse = true;
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney iterations = 1;
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney 'reverse': reverse,
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney 'iterations': iterations
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<h2>Running the Animation</h2>
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<p>Finally we add event handlers to run the animation.</p>
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeneynode.on('mouseover', hover);
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeneynode.on('mouseout', hover);
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<h2>Complete Example Source</h2>
1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney{{>alt-iterations-source}}