Finishing multiple animations in the same time

Question

I have four '.dist' elements. They have a different preloaded data (exactly: 57 , 27 , 17 , 244). I want to animate incrementing, and I wrote this code:

$('.dist').each(function() {
    var count = parseInt($(this).text())
    var incr = 0
    var that = $(this)
    var animation_time = 500
    var interv = animation_time / count

    $(this).text('0')

    var fd = setInterval(function() {
        if (incr < count){
            incr++
            that.text(parseInt(incr))
        }
    } , interv)
    console.log(interv)
})

The problem: The biggest value finishes 100 light years after the rest.

Console.log (directly from this code) returns:

8.928571428571429 18.51851851851852 29.41176470588235 2.0491803278688523

Thats the values which I/We expected, but I think every interval has a specific delay, but I dont't know how to detect and correct that delay.

I want to finish all of incrementations from 0 to 'var count' in time ~= 500ms. I want to start all of incrementations in the same time, and finish every one in the same time.

Sorry for my primitive querstion but I started my adventure with js/jq only 6 months ago, and I can't find the answer by google. Maybe I'm retarted or something. Thanks for help.

edit: html

<div class="info back2 border corners1">
        <span class="dist">56</span>  seriali<br>
        <span class="dist">27</span>  obejrzanych<br>
        <span class="dist">17</span>  oczekuje<br>
        <span class="dist">244</span>  sezonów<br>
</div>

Answer 1

You have two problems: One is that you end up with a very small interval, and second that the calculated interval becomes a float. SetInterval can only handle whole milliseconds, not fractions, so your calculation will always be off. Better to set a start and end time and calculate the difference.

This is the most accurate way to do time calculations in Javascript anyways.

$('.dist').each(function() {
    var count = parseInt($(this).text());
    var incr = 0;
    var that = $(this);
    var animation_time = 500;

    $(this).text('0');
    var time_start = new Date();

    var fd = setInterval(function() {
        var time_passed = new Date() - time_start;
        if (time_passed >= animation_time) {
            clearInterval(fd);
            time_passed = animation_time;
        }
        that.text(Math.round(count*time_passed/animation_time));
    } , 10);
})

http://jsfiddle.net/xau91msr/

Or if you don't care about the actual time for the animation and want browser stutters etc to not count as passed time you can increment time_passed yourself:

http://jsfiddle.net/jevjyf3m/

Answer 2

If you have a fixed number of steps and increment proportionally, then your counts will reach their ends together, also don't forget to clear the interval once the animation is complete.

http://jsfiddle.net/rtvtdasz/10

clearInterval(fd);