动画过程中更改jQuery的动画时长(Change jQuery's animation d

2019-08-16 17:17发布

是否有可能改变duration两个不同的值之间的当前运行jQuery的动画?

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

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

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

......甚至,改变fx.options.durationstep -方法不影响正在运行的动画:

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/



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的使用setInterval()为13一个间隔所以理论上step()应该每13毫秒被调用,但因为没有保证我认为持续时间应至少被增加30毫秒。
个人而言,我甚至会去至少100有更好的运行有点长(100毫秒,几乎无法察觉),而不是它过早停止动画。



文章来源: Change jQuery's animation duration during animating