Question

Suppose I have some div, and I use .animate({opacity:0},400, function(){}); for its children.
Is it ever possible then to get the remaining time for an animation to complete? eg, 200 ms remaining, or 0 if there’s no animation?
Thanks.

Answer 1

To help you better understand how you can use the step function
[as posted by gdoron]
I created an example using the step function to get the remaining time:

(click the get state! button to stop the animation and retrieve the remaining time!)

demo with distance
demo with opacity

Distance example 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>');
});

• You can see how I used the fx.prop inside the animation step to get the (left) property that is currently animated.
  
• You can see how: knowing the animation time and the distance (opacity, whatever…) we can easily retrieve the ‘stopped/paused’ state by some simple math ((now*time)/distance) and thanks to the returned now value.