jQuery count large numbers up

Solution 1:

Looking at the documentation for the .animate() API I think the answer may be as simple as you are not using .animate() for its intended purpose. Any usage above and beyond what is documented is not guaranteed to work (and likely may not).

I say this because the documentation states that .animate() is intended to:

Perform a custom animation of a set of CSS properties.

All the document show the initial object passed in that is chained off of as a CSS selector, not an arbitrary object. All the examples additionally show that the properties passed as the first arg to .animate() are to be an object of valid CSS properties.

Of particular note is the intended purpose of .step():

A function to be called for each animated property of each animated element. This function provides an opportunity to modify the Tween object to change the value of the property before it is set.

(emphasis added)

Based on this reading, .step is only intended to adjust the value, and then jQuery will internally take the adjusted value and apply it to the element in question. However, you are circumventing this process, and using it to directly manipulate the element yourself.

If I had to venture a guess, I would say that for the final update in the animate cycle, step is skipped, because there should be no need for adjustment because jQuery assumes it is simply setting the ultimate final value of CSS. As was stated in the comments of the question, you could simply use the complete hook to set it, but ultimately you are abusing/misusing the .animate() method and when working outside of the documented API you are opening yourself up to potential breaks in behavior with library updates. I would instead recommend exploring a different means of achieving this effect that doesn't leverage undocumented, unintended usage of the jQuery API.

(Update: While not quite a duplicate this answer from a similar question asking how to update text content with animate() provides a similar answer...)