Would Like To Understand The Animate Function (calculation And Stepping)

I would like to know how does the jQuery .animate() function work? - calculation and stepping (how much it jumps)

Solution 1:

When the animation starts, a timestamp is taken. Then everytime a step triggers (depends on browser and how much stuff is going on), it is calculated how much time has passed since the animation started and the progress is calculated from that.

For example, animation started at 1322338364714, and the animation is supposed to last 5000ms. Once a step is triggered the progress is calculated like so:

1. Get current time, say 1322338366714.
2. Normalize = 1322338366714 - 1322338364714 = 2000
3. Progress is 2000 / 5000 = 0.4 = 40%. So a div that is being animated from 0px to 100px, gets 40px height.