jquery - 在动画期间更改 jQuery 的动画持续时间

Question

是否可以在两个不同值之间更改当前运行的 jQuery 动画的持续时间？

我尝试通过直接分配更改持续时间，但没有成功:

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

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

...甚至，更改 step 方法中的 fx.options.duration 也不会影响运行动画:

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 秒动画时。在下面的代码中，动画将立即生效。想想看，这可能不是您想要的，因为您可能真正关心的是速度，而不是持续时间。

下面的代码是一个粗略的草图，我不确定它是否准确，在减少动画值时是否有效，或者它如何处理多个动画值。您也只能更改一次持续时间。

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/