jQuery - ループアニメーションの一時停止と再開があまりにも速いため、キューが動かなくなる

Question

私は以下のコードを永久にアニメーションし、マウスのEnterキーで現在のアニメーションの終わりで一時停止し、マウスを離してから再開します。それは、私が1つの問題を除いてどのようにしたいかに作用します。

要素を素早く（たとえばコーナーを横切って）移動すると、何らかの種類のキューが生成され、すべてがうまくいきます。しかし、実際にキューをチェックすると、何も変わっていません。また、アニメーションはキューに入れられた順序で実行されていないことも明らかです。

次のコードを使用して、マウスをグレーの領域の内側と外側に振りかざしてください。最終的にアニメーションの再開を許可すると、彼らは結婚式に行きます（http://jsfiddle.net/54YTx/でも利用可能です）。

$('body').html('<div style="background: lightgrey;">Testing</div>'); 

function do_animations() { 
    // Always 0 or 1 
    console.log($('div').queue('fx').length); 

    $('div') 
     .delay(1000) 
     // Hardcoded numbers mean that resuming from the bottom position takes longer but it doesn't matter in this simple example 
     .animate({'padding-top': '100px'}, 1000) 
     .animate({'padding-top': '0px'}, 1000) 
     // Queue instead of callback so that clearQueue() can stop the loop reliably 
     .queue(function() { 
      do_animations(); 
      $('div').dequeue(); 
     }); 
}; 
do_animations(); 

$('div').hover(function() { 
    // Don't use stop(). We want the current animation to finish 
    $('div').clearQueue(); 
}, function() { 
    do_animations(); 
});​ 

Answer 1

アニメーションでは、clearQueue()がバグである可能性があります。元のコードでclearQueue()を削除した場合、私は何をしてもアニメーションが同期しなくなることはありませんでした。もちろん私はアニメーションを止めることもできませんでした。私はjQueryのソースを掘り下げました。キューは間違いなくクリアされていますが、jQueryはまだどこかの場所からアニメーションを引き出しているので、クロージャ関連または何かになる可能性があります。場合によってはclearQueue()もクリアされていないようです。delay()

ほとんどの防弾対策は、昔と同じようにsetTimeout/clearTimeoutを使用していることがわかりました。たぶん、私はjQueryのキューを理解していないが、私は過去にそれに問題はなかった。

（http://jsfiddle.net/QkpE6/でも利用可能）

$('body').html('<div style="background: lightgrey;">Testing</div>'); 

function play() { 
    timer = setTimeout(do_animations, 2000); 
} 

function pause() { 
    clearTimeout(timer); 
} 

function do_animations() { 
    var padding = ($('div').css('padding-top') == '0px') ? '100px' : '0px'; 

    $('div') 
     .queue(function() { 
      $(this).animate(
       {'padding-top': padding}, 
       {duration: 1000, queue: false} 
      ).dequeue(); 
     }).queue(function() { 
      play(); 
      $(this).dequeue(); 
     }); 
}; 
play(); 

$('div').hover(function() { 
    pause(); 
}, function() { 
    play(); 
}); 

Answer 2

clearQueueを使用すると、すべてのステップがキューから削除されますが、最初のアニメーションはキューにはありません。 リピートコールバックだけを削除します。 マウスを素早く動かすと、2つのアニメーションのスタックがすべてのmouseInで積み上げられます。

delay（）の直前に.stop()を追加すると、この要素の他のすべてのアニメーションが削除されるだけなので、キューを傷つけることなくトリックを行うことができます。

2つのアニメーションが最初に実行されてもキューに入れられるように、このアニメーションを変更する必要があります。

---

私は一例thatsの知っているが、あなたのホーブのイベントであなたが使用する必要があります。$(this).clearQueue();をあなたのページに一つだけのdiv以上のものを持っている場合。

Answer 3

申し訳ありませんが、フィドル

を逃したそれ自体、私の変更： http://jsfiddle.net/snS78/

は今、すべての次のステップは、最後のコールバックです。 これは問題を解決するようです。

... 
$('#jumpy') 
    .delay(1000) 
    .stop() 
    // Hardcoded numbers mean that resuming from the bottom position takes longer but it doesn't matter in this simple example 
    .animate({'padding-top': '100px'}, 1000, 
      function(){ 
       $(this).animate({'padding-top': '0px'}, 1000, 
         function(){ 
          $(this).queue(function() { 
           do_animations(); 
           $('#jumpy').dequeue(); 
          }) 
         }) 
       }); 
...