Question

我被要求创建一个简单的png动画：将鼠标悬停在菜单项上时会出现一个闪烁：http://www.breathoflifeart.com/wordpress/videos/ 正如您在发布时所看到的那样，动画播放正常，但在另一个实例启动时停止播放（以适中的速度将鼠标移到菜单条目上以查看错误）我正在尝试：

A.即使在另一个元素突出显示之后，让动画播放或
B.将背景位置重置为0 onmouseout

这是当前的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/" onmouseover="scrollUp(42, 9, document.getElementById('sp-58'))">
  For Sale
  <div id="sp-58" class="sparkleparty"></div>
</a>

Answer 1

您真正需要的是为每个动画使用单独的 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
};

Answer 2

我为此创建了一个简单的库。看看：https://github.com/wolthers/SpriteClip.js

同时运行多个Javascript png精灵动画

2 个答案: