Is there any way to get the remaining time of animation?

animation, jquery

Solution

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.

Problem

Original source