7

duration現在実行中の jQuery アニメーションの を 2 つの異なる値の間で変更することは可能ですか?

直接割り当てを介して変更しようとしましたdurationが、成功しませんでした:

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

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

...さらに、fx.options.durationinstepメソッドを変更しても、実行中のアニメーションには影響しません。

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
  }
});

ここで遊ぶためのフィドルがあります。これを行う方法はありますか？

4

2 に答える 2

10

期間は、参照ではなく、値によって渡されます。への参照を保存animateしませんduration。オプション オブジェクト (参照によって渡される) を更新しても、jQuery はoptions.duration内部的に使用します。つまり、値によって渡されます。

簡単な修正として、アニメーションを停止し、新しい期間で再開することができます - すでに終わっているアニメーションの部分を調整します.

たとえば、4 秒のアニメーションを 3 秒後に 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/

于 2013-02-03T14:52:03.510 に答える