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

Question

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

Answer 1

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

(单击get state!按钮停止动画并检索剩余时间!)

带有不透明度的远程
演示演示

距离示例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值.