1a4f596ce75683d6e0b330ac39510b2e177f3b43vboxsync<link href="{{componentAssets}}/anim.css" rel="stylesheet" type="text/css">

1a4f596ce75683d6e0b330ac39510b2e177f3b43vboxsync<div class="intro">

1a4f596ce75683d6e0b330ac39510b2e177f3b43vboxsync <p>This demonstrates how to use the <code>iterations</code> attribute to run multiple iterations of the animation.</p>

1a4f596ce75683d6e0b330ac39510b2e177f3b43vboxsync <p>Mouse over the link to begin the animation.</p>

1a4f596ce75683d6e0b330ac39510b2e177f3b43vboxsync</div>

4604ab7d38c2bd2dfc255aa1facffdf81c1c9153vboxsync

1a4f596ce75683d6e0b330ac39510b2e177f3b43vboxsync<div class="example">

1c94c0a63ba68be1a7b2c640e70d7a06464e4fcavboxsync{{>alt-iterations-source}}

1c94c0a63ba68be1a7b2c640e70d7a06464e4fcavboxsync</div>

1c94c0a63ba68be1a7b2c640e70d7a06464e4fcavboxsync

1c94c0a63ba68be1a7b2c640e70d7a06464e4fcavboxsync<h2>Setting up the HTML</h2>

1c94c0a63ba68be1a7b2c640e70d7a06464e4fcavboxsync<p>First we add some HTML to animate.</p>

1c94c0a63ba68be1a7b2c640e70d7a06464e4fcavboxsync

1c94c0a63ba68be1a7b2c640e70d7a06464e4fcavboxsync```

1c94c0a63ba68be1a7b2c640e70d7a06464e4fcavboxsync<a href="#" id="demo">hover me</a>

4604ab7d38c2bd2dfc255aa1facffdf81c1c9153vboxsync```

4604ab7d38c2bd2dfc255aa1facffdf81c1c9153vboxsync

4604ab7d38c2bd2dfc255aa1facffdf81c1c9153vboxsync<h2>Creating the Anim Instance</h2>

4604ab7d38c2bd2dfc255aa1facffdf81c1c9153vboxsync<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>

4604ab7d38c2bd2dfc255aa1facffdf81c1c9153vboxsync<p>Adding an <code>iterations</code> attribute of "infinite" means that the animation will run continuously.</p>

4604ab7d38c2bd2dfc255aa1facffdf81c1c9153vboxsync<p>The <code>direction</code> attribute of "alternate" means that the animation reverses every other iteration.</p>

4604ab7d38c2bd2dfc255aa1facffdf81c1c9153vboxsync

4604ab7d38c2bd2dfc255aa1facffdf81c1c9153vboxsync```

4604ab7d38c2bd2dfc255aa1facffdf81c1c9153vboxsyncvar node = Y.one('#demo');

a5095136db25095b1bebc90f76da25cbd4cdefebvboxsync

4604ab7d38c2bd2dfc255aa1facffdf81c1c9153vboxsyncvar anim = new Y.Anim({

4604ab7d38c2bd2dfc255aa1facffdf81c1c9153vboxsync node: node,

4604ab7d38c2bd2dfc255aa1facffdf81c1c9153vboxsync from: {

4604ab7d38c2bd2dfc255aa1facffdf81c1c9153vboxsync backgroundColor:node.getStyle('backgroundColor'),

4604ab7d38c2bd2dfc255aa1facffdf81c1c9153vboxsync color: node.getStyle('color'),

4604ab7d38c2bd2dfc255aa1facffdf81c1c9153vboxsync borderColor: node.getStyle('borderTopColor')

4604ab7d38c2bd2dfc255aa1facffdf81c1c9153vboxsync },

4604ab7d38c2bd2dfc255aa1facffdf81c1c9153vboxsync

4604ab7d38c2bd2dfc255aa1facffdf81c1c9153vboxsync to: {

4604ab7d38c2bd2dfc255aa1facffdf81c1c9153vboxsync color: '#fff',

4604ab7d38c2bd2dfc255aa1facffdf81c1c9153vboxsync backgroundColor:'#FF8800',

4604ab7d38c2bd2dfc255aa1facffdf81c1c9153vboxsync borderColor: '#BA6200'

a5095136db25095b1bebc90f76da25cbd4cdefebvboxsync },

4604ab7d38c2bd2dfc255aa1facffdf81c1c9153vboxsync

4604ab7d38c2bd2dfc255aa1facffdf81c1c9153vboxsync duration: 0.5,

4604ab7d38c2bd2dfc255aa1facffdf81c1c9153vboxsync iterations: 'infinite',

1a4f596ce75683d6e0b330ac39510b2e177f3b43vboxsync direction: 'alternate'

5c65eaa08f2ec993a19c9bef6e5463918e40e0ebvboxsync});

4604ab7d38c2bd2dfc255aa1facffdf81c1c9153vboxsync```

4604ab7d38c2bd2dfc255aa1facffdf81c1c9153vboxsync

4604ab7d38c2bd2dfc255aa1facffdf81c1c9153vboxsync<h2>Changing Attributes</h2>

4604ab7d38c2bd2dfc255aa1facffdf81c1c9153vboxsync<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>

4604ab7d38c2bd2dfc255aa1facffdf81c1c9153vboxsync<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>

4604ab7d38c2bd2dfc255aa1facffdf81c1c9153vboxsync

4604ab7d38c2bd2dfc255aa1facffdf81c1c9153vboxsync```

var hover = function(e) {

var reverse = false,

iterations = 'infinite';

if (anim.get('running')) {

anim.pause();

}

if (e.type === 'mouseout') {

reverse = true;

iterations = 1;

}

anim.setAttrs({

'reverse': reverse,

'iterations': iterations

});

anim.run();

};

```

<h2>Running the Animation</h2>

<p>Finally we add event handlers to run the animation.</p>

```

node.on('mouseover', hover);

node.on('mouseout', hover);

```

<h2>Complete Example Source</h2>

```

{{>alt-iterations-source}}

```