jquery - 有没有办法获取动画的剩余时间？

Question

假设我有一些 div，并且我为其子元素使用 .animate({opacity:0},400, function(){}); 。那么是否有可能获得动画完成的剩余时间？例如，剩余 200 毫秒，或者如果没有动画则为 0？谢谢。

Answer 1

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

(点击获取状态!按钮停止动画并检索剩余时间!)

<强> 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来获取当前动画的(left)属性。
  
• 您可以看到如何:知道动画时间和距离(不透明度，无论如何......)，我们可以通过一些简单的数学轻松检索“停止/暂停”状态((现在*时间)/距离) 并感谢返回的 now 值。