javascript - 你如何使用 jQuery 加速动画中间动画？

Question

假设你有一个像这样的特定时间运行的动画:

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

动画很长，因此用户尝试再次单击按钮。动画已经播放了一定的时间，每次可能都不一样。

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

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

Answer 1

您可以使用animate 的step 选项来跟踪动画的进度。然后根据这些信息，您可以计算动画中剩余的时间。然后停止当前动画并开始一个持续时间减半的新动画。

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