Geek asks and answers

Is there any way to get the remaining animation time?

Suppose I have a div and I use .animate({opacity:0},400, function(){});for my children. Is it possible then to get the remaining time for the animation? for example, 200 ms, or 0 if there is no animation? Thank.

+5
source share
3 answers

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

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

demo with distance demo with opacity

JQuery distance example:

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 .
+6

, , step :

.animate() - , . . ( fx), DOM.

: ,
fx: - jQuery.fx, , elem , , , prop .

docs

+3

Listen, ignoring the feature stepeveryone is talking about. I once needed what you were doing and wrote my own, which just put it back in, designed the time left from viewing the total animation time (you should know, since you once gave this jQuery number) and the private from current and opacity of the target. Then, simply multiply this quotient with the total animation time to get the amount subtracted from the total time. Just like that.

Pseudo Code:

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;
}
+3
source

More articles:


All Articles