Restart / update Javascript function or timer

Question

I have the following code on my site ....

At the moment, when the "Test 1" button is pressed, the animation begins. After that, when you click "Test 2" or "Test 3", the animation does not restart ...

How to restart the animation when any of the links is clicked?

And is it possible to have Fade out and Fade In, after the link has been clicked?

HTML markup:

<div id="anim"></div> </br> </br> <li id="item1"><span></span><a href="#">Test 1</a></li> <li id="item2"><span></span><a href="#">Test 2</a></li> <li id="item3"><span></span><a href="#">Test 3</a></li> 

CSS

 #anim { width: 14px; height: 14px; background-image: url(http://mail.google.com/mail/im/emotisprites/wink2.png); background-repeat: no-repeat; } 

JavaScript:

 var scrollUp = (function () { var timerId, height, times ,i = 0 , element; return { stop : function(){ clearInterval( timerId ); }, init :function( h, t, el ){ height = h; times = t; element =el ; }, start : function ( ) { timerId = setInterval(function () { if (i > times) // if the last frame is reached, set counter to zero clearInterval(timerId); element.style.backgroundPosition = "0px -" + i * height + 'px'; //scroll up i++; }, 100); // every 100 milliseconds } }; })(); scrollUp.init(14, 40, document.getElementById('anim')); // start animation: document.getElementById('item1').addEventListener('click', function(){ scrollUp.start(); }, false ); 

Here's the script: http://jsfiddle.net/ctF4t/3/

Answer 1

As far as I understand, you want the animation (regardless of what state it is now) to restart if one of the buttons is pressed?

Well, if that is the case, you must first call the stop function every time before start :

 document.getElementById('item1').addEventListener('click', function(){ scrollUp.stop(); scrollUp.start(); }, false ); 

In addition, the index should be reset to stop :

 stop : function(){ clearInterval( timerId ); i = 0; }, 

This will do the job for the #item1 button. Here is a demo. Applying this to others should not be a big problem now. For example, bind the event to <body/> and read the target:

 function startAnimation(e) { e = e || window.event; var target = e.target || e.srcElement; target = target.parentNode; if (!target.id.match(/item[0-3]/)) { return e; } scrollUp.stop(); scrollUp.start(); } document.body.addEventListener('click',startAnimation,false); 

Here is a complete demo.

Answer 2

How to restart animation when clicking any of the links?

To determine a restart , you want to stop to execute any intervals with continuous operation, reset i to 0 , as this means “start” and start new interval:

 return { // ... restart: function () { this.stop(); i = 0; this.start(); } }; 

Then you need to bind to each li so that they all can do restart() :

 var items = document.querySelectorAll('#item1, #item2, #item3'); for (var i = 0, l = items.length; i < l; i++) { items[i].addEventListener('click', function () { scrollUp.restart(); }, false); } 

Answer 3

I changed your fiddle to this: http://jsfiddle.net/M5pe8/1/

You don't seem to reset "i" var, so the animation cannot restart from the beginning (that is, from "zero"); I left a warning line (but commented out) to show you how I came to my conclusions:

  if (i > times) // if the last frame is reached, set counter to zero { //alert(i + ' > ' + times); clearInterval(timerId); i = 0; } else { element.style.backgroundPosition = "0px -" + i * height + 'px'; //scroll up i++; } 

And, of course, I added lines to bind the click event, which fires an animation on two other links (for completeness only). Now, clicking the second time the animation restarts. That's what you need?

EDIT: Link to the corrected script