Question

I’m learning some basics about JQuery. When I learn about something, I always try to imagine how works behind the scenes, but I don’t imagine how some effects really are done.

For example some simple .hide(slow) is an example. As I understand, JQuery modifies HTML code of HTML components. A “.hide” without animation seems pretty “obvious”, I guess “visibility:none” would do the trick.

But animation implies something more interesting I guess. The first idea is a loop that changes attributes and expect rendering is fast enough to make a smooth animation. But it sounds pretty “CPU abusive”.

How it’s really done?

Edit: I don’t consider even an average JS programmer, so reading the original source code is quite difficut. I was looking for some “big picture” explanation. Maybe the word really wasn’t appropiated.

Answer 1

jQuery’s source code is a bit too high-level to understand easily, so it might be easier to just write a simple animation from scratch:

var element = document.getElementById('element');
var maximum = 200;
var interval = 5;
var left = 10;

function animate() {
    if (left < maximum) {
        left += 1 - Math.pow(left / maximum, 5);
        element.style.left = left + 'px';

        setTimeout(animate, interval);
    }
}

animate();​

And a working demo: http://jsfiddle.net/QB8C7/3/.

jQuery does something similar, but in a much more structured manner.