Why can't jquery animate a number exactly?

Question

I am trying to use the following code to increase the number in a text box

// Animate the element value from 0 to 1100000: $({someValue: 0}).animate({someValue: 1100000}, { duration: 1000, step: function() { // called on every step // Update the element text with value: $('#counterx').text(Math.floor(this.someValue+1)); } }); 

it works with small numbers, for example, from 0 to 100, but when it comes to a large number, as in the mentioned code, it does not give the target number, it brings to life numbers like 1099933 or 1099610 or ..... and every time, when it changes.

so how can i make it animate the number i specified?

Answer 1

I have the same problem. The rationale is that the animate function uses a time-based mathematical formula. You do not notice this when animating something css, because it is close enough in pixels. It will approach the final value, but may not always be the final value. The solution should use the complete event to set the last value.

Here is what you need to do:

 function animateNumber(ele,no,stepTime){ $({someValue: 0}).animate({someValue: no}, { duration: stepTime, step: function() { // called on every step. Update the element text with value: ele.text(Math.floor(this.someValue+1)); }, complete : function(){ ele.text(no); } }); } animateNumber($('#counterx'),100,10000); animateNumber($('#countery'),100,1000) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> counterx(slow): <span id=counterx>--</span> <br/> countery(fast): <span id=countery>--</span> 

Answer 2

The animation is not designed to increase the counter as text (although it may work by chance, which may change with any new version of jQuery), it is designed to animate one or more CSS properties. You should use setInterval instead.

http://jsfiddle.net/jbabey/mKa5r/

 var num = 0; var interval = setInterval(function () { document.getElementById('result').innerHTML = num; num++; if (num === 100) { clearInterval(interval); } }, 100);​ 

Answer 3

1) Javascript is a single-threaded application. Timeouts and animations ONLY push the event to the end of the stack based on the ideal stacking order. A long script segment can cause the actual response time of this event to significantly exceed the required accuracy.

2) The animation approximates how much you need to increase, and on large numbers this resolution is very inaccurate.

3) jQuery has only one animation buffer. You may run into serious rendering problems if you use more than one “counter” using animation. Be sure to stop the previous animation before making any adjustments that affect it.

4) Even with a timeout of 0, you can expect a real delay in the world of ~ 15. Even if this is the only "thread" that you are running.

Decision:

 take a snapshot of the DTG set your interval to something within the human experience, say ~200 on each interval, check how much time has passed from the original DTG set your text field to that delta number. stop the interval with the original DTG + "your target number" > the new DTG 

Answer 4

Here is a solution that does not use .animate() .

DEMO: http://jsfiddle.net/czbAy/4/

It is just a linear modification; you do not get options for easing, if that is what you were after.

 var counterx = $('#counterx'), // cache the DOM selection! :) i = 0, n = 1100000, dur = 1000, // 1 second int = 13, s = Math.round(n / (dur / int)); var id = setInterval(function() { counterx.text(i += s); if (i >= n) { clearInterval(id); counterx.text(n); } }, int); 

Answer 5

Here is the jquery plugin for reliably animating numbers, ut uses the full callback to set the correct final number after the animation finishes:

https://github.com/kajic/jquery-animateNumber