Question

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

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

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

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

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

Answer 1

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

http://jsfiddle.net/MdD45/

修改

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

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

pos

Answer 2

~~昨天我把一些东西放到skip in jQuery animations，这里是代码，根据你的用例修改它应该很容易：~~

编辑：修改后的版本：

演示：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。唯一的问题是，如果它是递减值，则需要使用different script。

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为它设置动画，并添加另一个加速转换的类。

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

4 个答案: