How does jQuery do animations?

Question

JQuery is written in Javascript. As someone who knows a little of everyone, I have to wonder how they wrote some of this. How do you animate HTML elements in pure Javascript? Does it just repeatedly update the CSS property, which should be animated using standard DOM manipulation, with callbacks to make it asynchronous? Or is it something more complicated?

Answer 1

jQuery animations simply update CSS properties on a repeating timer (which makes it asynchronous).

They also implement the tweening algorithm, which tracks whether the animation is longer than scheduled or behind schedule, and adjusts the step size in the animation at each step to catch up or slow down as needed. This allows you to complete the animation at the specified time no matter how fast the host computer is. The downside is that slower or busy computers will show more intermittent animations.

They also support attenuation functions that control the time / form of animation acceleration. Linear means constant speed. Swing is more typical, start slowly, accelerate to maximum speed in the middle and then slowly finish.

Since the animation is asynchronous, jQuery also implements the animation queue so that you can specify several animations that you want to see, execute one after another. The second animation begins when the first animation ends and so on. jQuery also offers a completion function, so if you want any of your own codes to start when the animation is complete, you can specify a callback function that will be called when the animation ends. This allows you to perform some operation when the animation is complete, for example, start the animation of some other object, hide the object, etc.

FYI, jQuery javascript source code is fully available if you want more detailed information. The core of the job is in a local function called doAnimation() , although most of the work is done in functions called step and update , which can be found using the jQuery.fx.prototype definition.

Answer 2

What it is: a simple old setInterval and some manipulations with the DOM.

Of course, the code is a little more complicated than that.

Take a look: http://code.jquery.com/jquery-latest.js , near the end of the file. Find jQuery.fx.prototype.

Answer 3

When checking an element during jQuery animation, it almost always changes your CSS code, which is assigned to the element through jQuery, which is not really assigned from the HTML you are writing. Get FireBug if you don't have one for firefox and check what happens during the animation.

Answer 4

Without reading the code itself, I understand that it really uses standard Javascript methods and properties to update DOM elements and CSS styles at regular intervals ("ticks"), which it performs using standard setInterval() and setTimeout() .