如何使用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 %
        }        
    });
});
​

Answer 2

我昨天在jQuery动画中做了一些跳过的东西，下面是代码，应该很容易根据您的用例进行修改：

编辑：修改版本：

演示：http://jsfiddle.net/SO_AMK/fJyKM/

jQuery:

var time = 10000;
var opacity = 1;
var currentTime = 0;
$("#square").animate({
    opacity: opacity
}, {
    duration: time,
    step: function(now, fx) {
        currentTime = Math.round((now * time) / opacity);
    },
    easing: "linear"
});

$("#hurry").click(function() {
    $("#square").stop().animate({
        opacity: opacity
    }, {
        duration: ((time - currentTime) / 4), // Get remaining time, divide by 4
        step: function(now, fx) {
            currentTime = Math.round((now * time) / opacity);
        },
        easing: "linear"
    });
});​

它也适用于其他属性，如宽度。唯一的问题是，如果它是一个递减的值，则需要使用不同的脚本。

Answer 3

是的，你可以。。

您必须使用"stop（）"方法停止动画，然后针对同一属性上的同一节点并作为目标值（原始值）启动新动画。

Answer 4

我不完全确定这是否可行，但可以考虑这样做：

<div id="box"></div>
<style type="text/css">
div#box {
    -webkit-transition: width 10s;
    -moz-transition: width 10s;
    transition: width 10s;
    background: #000;
    width: 100px;
}
div#box.speedy {
    -webkit-transition: width 5s;
    -moz-transition: width 5s;
    transition: width 5s;
}
</style>
<script style="text/javascript">
    $(function() {
        $('div#box').css('width', '400');
        setTimeout(function() {
            $('div#box').addClass('box');
        }, 2000);
    });
</script>

基本上让css设置动画，并添加另一个类来加快转换。