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

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

它也适用于其他属性，例如width。唯一的问题是，如果它是一个递减的值，那么您需要使用不同的脚本。

Answer 3

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

<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 对其进行动画处理，并添加另一个加速过渡的类。

Answer 4

是的你可以 ..

您必须使用“stop()”方法停止动画，然后针对同一属性上的同一节点启动一个新动画，并将其作为目标值，即原始值。