动画过程中改变jQuery的动画时长 [英] Change jQuery's animation duration during animating

问题描述

是否有可能改变两种不同的价值观之间的持续时间的当前运行jQuery的动画？

Is it possible to change the duration of a currently running jQuery animation between two different values?

我试图修改持续时间通过直接转让，但没有成功：

I've tried to change the duration via direct assignment, but no success:

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

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

......甚至，改变了 fx.options.duration 在步 -method不影响正在运行的动画：

...and even, changing the fx.options.duration in step-method does not affect the running animation:

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

下面是一个 小提琴 以玩耍。
任何想法如何可以做到这一点？

Here's a fiddle to play around. Any ideas how this can be done?

推荐答案

的持续时间是按值传递，而不是引用。因此，动画不存储时间参考。即使你更新的选项对象（按引用传递）jQuery使用 options.duration 内部，这意味着它将按值传递。

The duration is passed by value, not by reference. So animate does not store a reference to duration. Even if you update the options object (which is passed by reference) jQuery uses options.duration internally, which means it will be passed by value.

作为速战速决，你可以停止动画，并与新的持续时间重新启动 - 调整为已经在动画部分

As a quick fix you could stop the animation and restart it with the new duration - adjusting for the part of the animation that is already over.

您就需要考虑你想要的表现，例如，当您在3秒后加速4秒的动画2秒的动画。在动画低于code将立竿见影。关于它的思考，这可能不是你想要的，因为你可能真的在乎速度，而不是时间。

You'd need to consider how you want it to behave, for example when you speed up a 4 second animation to a 2 second animation after 3 seconds. In the code below the animation will be immediate. Thinking about it, that's probably not what you want since you probably really care about speed, not duration.

下code是一个草图，我不知道这是否是准确的，如果降低动画值或者它如何处理多个动画值时。你也只能更改一次持续时间

The code below is a rough sketch, I'm not sure if it's accurate, if it works when decreasing animation values or how it handles multiple animation values. You can also only change the duration once.

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/

这篇关于动画过程中改变jQuery的动画时长的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！