Running multiple Javascript png sprite animations simultaneously

[admin]

I've been requested to create a simple png animation: a glint that appears when hovering over menu items as seen here: <a href="http://www.breathoflifeart.com/wordpress/videos/" rel="nofollow">http://www.breathoflifeart.com/wordpress/videos/</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) {
        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 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>