你如何使用jQuery加速动画中期动画？

Question

假设你有一个动画运行一段时间,如下所示:

$('span').animate({opacity : 1}, 10000);

动画很长,因此用户再次尝试单击该按钮.动画已经是动画的一定时间,每次都可能会有所不同.

在第二次单击时,可以更新动画过程,在用户单击时保持对象的不透明度,只需更改完成所需的时间？

基本上我想在动画中途更新动画过程.

Answer 1

您可以使用step选项animate来跟踪动画的距离.然后使用该信息,您可以计算动画中剩余的时间.然后停止当前动画并以一半的持续时间开始一个新动画.

http://jsfiddle.net/MdD45/

编辑

看起来传递的第二个参数step包含一个名为的属性pos,它告诉你动画中的百分比.这可以进一步简化事情.

http://jsfiddle.net/MdD45/1/

var startVal = 0;
var endVal = 1;
var duration = 10000;

var howfar = 0;

$('span').css("opacity",startVal)
    .animate({
        opacity : endVal
    }, {
        duration: duration,
        step: function(now, fx){
            howfar = fx.pos;  // between 0 and 1, tells how far along %
        }        
    });

$("button").click(function(){
    // calculate the new duration as half of the remaining duration
    var timeRemaining = duration - (howfar * duration);
    duration = timeRemaining / 2;

    $('span').stop().animate({
        opacity : endVal
    }, {
        duration: duration,
        step: function(now, fx){
            howfar = fx.pos;  // between 0 and 1, tells how far along %
        }        
    });
});
?