我被要求创建一个简单的png动画：当将鼠标悬停在菜单项上时会出现一个闪烁：http://www.breathoflifeart.com/wordpress/videos/
正如您在发布时所看到的那样,动画播放正常,但在另一个实例启动时停止播放(以适中的速度将鼠标移到菜单条目上以查看错误)
我正试图：
A.即使在突出显示另一个元素之后,也让动画播放
要么
B.将背景位置重置为0 onm ouseout

这是当前的javascript,修改自另一个问题中的示例：

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(每个元素遵循相同的基本模板)

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

解决方法:

您真正需要的是为每个动画使用单独的timerId-s.
这是一个范围和关闭的问题,真的.在提供的示例中,timerId对于所有scrollUp(…)函数都是全局的.要解决此问题,您可以尝试这样做：

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
};