在动画制作过程中更改jQuery的动画持续时间

Question

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

我试图改变duration通过直接分配,但没有成功:

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

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

...甚至,更改fx.options.durationin step-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
  }
});

这是一个小提琴.有什么想法可以做到这一点？

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/