4

私は単純な png アニメーションを作成するように依頼されました: ここに見られるように、メニュー項目にカーソルを合わせると現れるグリント: http://www.breathoflifeart.com/wordpress/videos/ 投稿時に見ることができるように、アニメーション正常に再生されますが、別のインスタンスが開始するとその場で停止します (バグを確認するには、メニュー エントリ上でマウスを適度な速度でスイープします) 次のいずれかを試みています:

A. 別の要素が強調表示された後でもアニメーションを再生させる
か、
B . background-position を onmouseout の 0 にリセットします

別の質問で見つかった例から変更された現在の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>
4

2 に答える 2

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
};
于 2012-12-25T10:31:01.003 に答える