有没有办法获得动画的剩余时间？

Question

假设我有一些div，我为它的孩子使用.animate({opacity:0},400, function(){});。 那么有可能让动画的剩余时间完成吗？例如，剩余200毫秒，如果没有动画则为0？ 感谢。

Answer 1

帮助您更好地了解如何使用step功能 [由 gdoron 发布]
我使用步骤函数创建了一个示例来获取剩余时间：

（单击get state!按钮停止动画并检索剩余时间！）

<强> demo with distance
的 demo with opacity

距离示例jQuery：

var time = 4000;
var distance = 300;
var currentTime = 0;

$('#ball').animate({
    left: distance
}, {
    duration: time,
    step: function (now, fx) {

        currentTime = Math.round((now * time) / distance);
        var data = fx.prop + ' ' + Math.round(now) + '; <b>' + currentTime + 'ms</b> ';

        $('body').append('<p>' + data + '</p>');
    },
    easing: 'linear'
});

$('#getTime').click(function () {
    $('#ball').stop();
    $('body').prepend('<p>currentTime is:' + currentTime + ' ms; REMAINING: ' + (time - currentTime) + 'ms</p>');
});

• 您可以看到我如何使用fx.prop中的animation step获取当前动画的（left）属性。
  
• 您可以看到：知道动画时间和距离（不透明度，无论......），我们可以通过一些简单的数学运算（(now*time)/distance）轻松检索“已停止/暂停”状态，并感谢返回now值。

Answer 2

我不知道您为什么需要它，但step可以帮助您提取此值：

步骤功能

  

.animate（）的第二个版本提供了一个步骤选项 - 在动画的每一步触发的回调函数。此功能对于启用自定义动画类型或在动画发生时更改动画非常有用。它接受两个参数（now和fx），并将其设置为动画的DOM元素。

     

现在：每个步骤动画的属性的数值
   fx ：对jQuery.fx原型对象的引用，该对象包含许多属性，例如动画元素的elem，动画属性的第一个和最后一个值的开始和结束，以及动画属性的道具。

docs

Answer 3

倾听，不要介意每个人都在谈论的step功能。我曾经需要你做了什么并写了我自己的东西，简单地通过查看总动画时间（你应该已经知道你曾经把这个数字给jQuery）和商< / em>当前和目标不透明度。然后将该商与总动画时间相乘，将总和从总时间中减去。就这么简单。

<强>的伪代码：

func calculate-time-left-in-a-running-fade-in-animation:
{
    var current_opacity = $elem.css('opacity');
    var target_opacity = this.getTargetOpacity();

    var total = this.getTotalAnimationTime();

    var quotient = current_opacity / target_opacity;
    return total - quotient * total;
}