アニメーション中にjQueryのアニメーションの時間を変更する

Question

現在実行中のjQueryアニメーションのdurationを2つの異なる値に変更することはできますか？

私が直接割り当て、ない成功を経てdurationを変更しようとしました：

var timing = { duration: 4000 }; 
$(document).click(function (e) { 
    timing.duration = 1000; 
}); 

$('#foo').animate({top:200, left:200}, timing); 

...とさえ、fx.options.durationstepで-methodを変更すると実行しているアニメーションには影響しません：

を

var state = false, 
$(document).click(function (e) { 
    state = true; 
}); 

$('#foo').animate({top:200, left:200}, { 
    duration: 4000, 
    step: function(now, fx){ 
    if(state) fx.options.duration = 1000; 
    console.log(fx.options.duration); // 1000 
    } 
}); 

ここにはfiddleがあります。 どのようにこれを行うことができますか？

Answer 1

期間は、参照渡しではなく値渡しとなります。したがってanimateにはdurationへの参照が格納されていません。オプションオブジェクト（参照渡し）を更新しても、jQueryは内部でoptions.durationを使用します。つまり、値渡しとなります。

クイックフィックスとして、アニメーションを停止して新しい期間で再起動することができます。既に終了しているアニメーションの部分を調整します。

3秒後に4秒のアニメーションを2秒のアニメーションにスピードアップするなど、その動作をどのようにするかを検討する必要があります。下のコードでは、アニメーションが即座に表示されます。それについて考えると、それは恐らくあなたが本当にスピードではなく、持続時間に本当に関心があるので、あなたが望むものではないでしょう。

以下のコードは大まかなスケッチですが、正確かどうかはわかりませんが、アニメーション値を下げるときに機能するか、複数のアニメーション値をどのように扱うかはわかりません。また、期間を1回だけ変更することもできます。

var state = false, 
    duration = 8000; 

$(document).click(function (e) { 
    state = true; 
    duration = 1000; 
}); 
var animationCss = {top:200, left:200}; 
$('#foo').animate(animationCss, { 
    duration: duration, 
    step: function(now, fx){ 
     if(state) { 
      $("#foo").stop(); 
      var percentageDone = (fx.now - fx.start)/(fx.end - fx.start) 
      var durationDone = fx.options.duration * percentageDone; 
      var newDuration = duration - durationDone; 
      if (newDuration < 0) 
      { 
       newDuration = 0; 
      } 
      $("#foo").animate(animationCss, { duration: newDuration}) 

     } 
    } 
}); 

http://fiddle.jshell.net/5cdwc/3/

Answer 2

私は少し遅れてオペアンプのための、おそらくですが、同じことをやろうとしている間、私はここに終わったことから、他の誰かがあまりにもことがあります。

start()コールバックjQueryでは、アニメーションオブジェクトを引数として渡すので、参照をどこかに保持してから、step()コールバックで変更することができます。以下のような

何か：

var animEnd = false; //this will be updated somewhere else 
var animObj; 
$().animate({ 
     width: '100%' 
    }, 
    { 
     start: function(animation){ 
      animObj = animation; 
     }, 
     step: function(now, tween){ 
      if(!animEnd) 
       //jquery set an interval of 13 but let's be safe 
       animObj.duration += 30; 

      //you can change the value of tween.pos aswell 
     } 
    } 
); 

は今、トリッキーな部分は、jQueryのstep()コールバックを呼び出す前に、アニメーションを停止するか、継続することを決定したということです。したがって、継続時間は次の目盛りのために設定され、十分大きく設定されていない場合、アニメーションが停止することがあります。
jQueryの使用間隔は13であるため、理論的にはstep()を13msごとに呼び出す必要がありますが、何も保証されていないため、最低限30msを長くする必要があります。
私は個人的には少なくとも100にもなるだろう。あまりにも早く停止するのではなく、少し長すぎる（100msはほとんど気づかない）アニメーションを持つ方がよい。