jQueryのアニメーションの遅延問題がセルフキューにループされています

Question

私はtimelineという定義を持っており、セレクタと、そのオブジェクトに適用する遅延とアニメーションのリストをリストしています。特定のオブジェクトのステップをループするように指定することができます。ここで

は、アニメーションをキューに使われている機能である：ここでは

function animateWithQueue(e, obj) { 
    if ($.queue(e[0]).length == 0) { 
     e.queue(function doNext(next) { 
      $.each(obj.steps, function(i, step) { 
       e.delay(step.pause).animate(step.anim, step.options); 
      }); 
      if (obj.loop) { 
       e.queue(doNext); 
      } 
      next(); 
     }); 
    } 
}​ 

はtimeline情報

var timeline = { 
    '.square': { 
     loop: true, 
     steps: [ 
      { pause: 800, anim: { right: '+=200' }, options: { duration: 400} }, 
      { pause: 1000, anim: { right: '-=200' }, options: { duration: 400} } 
     ] 
    }, 
    '.circle': { 
     loop: true, 
     steps: [ 
      { pause: 1200, anim: { top: '+=200' }, options: { duration: 400} }, 
      { pause: 1200, anim: { top: '-=200' }, options: { duration: 400} } 
     ] 
    } 
}; 

そして、ここでは、上記のアニメーション機能にtimelineを置く機能である：

$.each(timeline, function(selector, obj) { 
    animateWithQueue($(selector), obj); 
}); 

完全な例です。 http://jsfiddle.net/sprintstar/Tdads/

このコードは正常に動作するように見える、アニメーションループと停止ボタンはアニメーションを停止するためにクリックすることができ、キューをクリアするなど、我々が直面している問題は、停止を押すことでトリガーされ、何度も起動することができますが（例えば10回）。遅延が正しく機能していないことに気付き、形状がはるかに速く動くようになります。

なぜ、どのように修正できますか？以下のよう

Answer 1

何かがdelayとかなり右に動作していない...周りの仕事として

は、私は、this fiddleでdoTimeoutに置き換えました：

e.delay(step.pause).animate(step.anim, step.options); 

は次のようになります。

var timerName = e[0].className + $.now(); 
    timeouts.push(timerName); 
    e.queue(function(next) { 
     e.doTimeout(timerName, step.pause, function() { 
      this.animate(step.anim, step.options); 
      next(); 
     }); 
    }); 

timeoutsは、固有のタイムアウトIDの配列です。各タイムアウトIDは、停止ボタンがあらかじめ設定されているときにクリアされますssed。

私が言ったように、修正の回避策は、停止時にも要素の位置をリセットする必要があるためです。 （上の/右の定義から+ =と - =を削除していることに注意してください）

Answer 2

あなたの停止ハンドラを見て私はwstlが。 私はそれを保持divの代わりに.circleと.squareでターゲットにします。

アニメーションで問題が発生したのは、要素が速くて速くて速く動いていて、アニメーションが自分自身の上に積み重なっていたという結論だったからです。

api.jquery.com/clearQueue/とhttp://api.jquery.com/stop/は