Running multiple sprite javascript png animations at the same time

Question

I was asked to create a simple png animation: the shine that appears when you hover over menu items, as shown here: http://www.breathoflifeart.com/wordpress/videos/ As you can see at the time of publication, the animation works fine, but stops in place when another instance starts up (hover over the menu items at a moderate speed to see the error) I also try:

A. Let the animation play even after selecting another element
or
B. Reset background position to 0 onmouseout

Here's the current javascript, modified from an example found in another question:

var scrollUp = (function () { var timerId; // stored timer in case you want to use clearInterval later return function (height, times, element) { clearInterval(timerId); var i = 0; // a simple counter timerId = setInterval(function () { if (i > times) // if the last frame is reached, set counter to zero { i = 0; clearInterval(timerId);} else element.style.backgroundPosition = "0px -" + i * height + 'px'; //scroll up i++; }, 50); // every 50 milliseconds }; })(); 

HTML (follows the same basic template for each element)

 <a href="./for-sale/" onmouseover="scrollUp(42, 9, document.getElementById('sp-58'))"> For Sale <div id="sp-58" class="sparkleparty"></div> </a> 

Answer 1

All you really need is to use a separate timerId -s for each animation. This is actually a matter of areas and closures. In the above example, timerId is global for all scrollUp (...) functions . To fix this, you can try the following:

 var scrollUp = function (height, times, element) { var i = 0; // a simple counter var timerId = setInterval(function () { if (i > times) { i = 0; clearInterval(timerId); } else { element.style.backgroundPosition = "0px -" + i * height + 'px'; //scroll up } i++; }, 50); // every 50 milliseconds }; 

Answer 2

To do this, I created a simple library for this. Check this out: https://github.com/wolthers/SpriteClip.js