How to view width of element while animating?

Question

Hi.

I animate simply object using:

$("#progress").animate({width:400},2000)

Than i also want to view it's width like that

$("#loadingpro").html(pro+"%");

pro = Math.round(procent$("#progress").width()/4);

But when I am doing it like that it's start to delay whole cpu so much that it is not possible to do it at all.

Any ideas how I can try to do it in other way?

Answer 1

You could use setInterval() and clearInterval(). Play around with the interval to get it smooth. ~20 microseconds is what worked for me:

$(function() {
    var timer = setInterval(function() {
        $("#loadingpro").html(Math.round($("#progress").width()/4) + "%");
    },20);
    $("#progress").animate({width:400},2000, function() {
        clearInterval(timer);
    });
});​

jsFiddle example

.setInterval() is a good choice, since you can stop it with clearInterval() in the animate() callback once all your calculations are done.