How does jQuerys .animate method work (JavaScript)?

Question

As the title says, how does it work? Looking through the source is a nightmare because it's all using complicated arrays, but I don't really see code which does anything.

Any ideas?

Answer 1

The animate method works by taking the current value of the property you're animating, and the end value (which you give it) and calculating each "frame" in between. So if your animation is going from 1.0 to 0.0 in 10 steps, it hits .9, .8, .7, etc. It can do this process for any numeric css property.

Essentially it treats the start and end points like the keyframes of the animation and "tweens" the rest of the values it needs to get from one to the other, then runs a loop that processes through each "frame".