Geek Answers Handbook

JQuery animate () does not complete the animation

I have a problem where the animate()jQuery function does not complete the animation of my number count. It is expected that the animation will count from 0 to 5000, but when updating it sometimes ends at 4999, in other cases - 4989, etc.

It works 80% of the time correctly, but in 20% of cases when you refresh the page, the animation ends up at a different number. What am I doing wrong?

http://jsbin.com/dobajepoti/2/ (keep updating the page to see it)

+4
source share
3 answers

Try it without jQuery:

var count = 0;
var counter = setInterval(countUp, 1);
var output = document.querySelector("[data-value]");
var max = output.getAttribute("data-value");

function countUp() {
    count = count + 25;
    if (count > max) {
        clearInterval(counter);
        return;
    }
    output.innerHTML = count;
}
+2
source

step() , ( ). , 5000 .

, , done:

$(thing).animate({
  // ...
  step: myStepFunction,
  done: myStepFunction
});

. http://output.jsbin.com/fagicunuye

+5

The problem is that you live for 1000 ms. Depending on the processor, it may be that it cannot calculate 5,000 times during this time. You can animate it for a longer time and use stop () to stop the animation when your condition is met.

0
source

More articles:


All Articles