Running multiple Javascript png sprite animations simultaneously


Staff member
I've been requested to create a simple png animation: a glint that appears when hovering over menu items as seen here: <a href="" rel="nofollow"></a>
As you can see at time of posting, the animation plays fine, but stops in place when another instance starts (sweep the mouse over the menu entries at a moderate speed to see the bug)
I'm trying to either:<br /><br />
A. Let the animation play through even after another element is highlighted<br />
or<br />
B. Reset the 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) {
 var i = 0; // a simple counter
 timerId = setInterval(function () {
   if (i &gt; times) // if the last frame is reached, set counter to zero
   {  i = 0;
        else = "0px -" + i * height + 'px'; //scroll up
    }, 50); // every 50 milliseconds

HTML (follows same basic template for each element)

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