Moving elements with javascript

Question

What are the best practices for moving elements with javascript? Do you use timeouts or intervals? Is it bad to have timed events for 10 milliseconds, or will it be precise? Do you move pixel by pixel, or a certain fraction of the total distance? If you use intervals, how do you stop the interval when the element is in position?

The last two times I've seen motion in javascript have been with jQuery and Raphael.js, neither of which I can understand the source code of. Are there some good tutorials or code examples anywhere? Is there a simple explanation of the methods jQuery uses?

Answer 1

There is a recent function called requestAnimationFrame which runs a function as soon as possible. This is a good practice since it has been made for animation purposes.

The way it works in terms of coding is the same as setTimeout, e.g. when the function finishes you call requestAnimationFrame.

In the function, you fetch the current time to see how the object should be positioned at that time.

You can cancel a pending function it with cancelRequestAnimationFrame, passing the return value of requestAnimationFrame.

Currently this is not cross-browser and the functions are vendor-prefixed, e.g. webkitRequestAnimationFrame for Chrome.

E.g.: http://jsfiddle.net/pimvdb/G2ThU/1/.

var div = document.getElementById('div');
var animation;

function move() {
    var time = Math.round((new Date()).getTime() / 10) % 200;

    div.style.left = time + 'px';

    animation = requestAnimationFrame(move);
}

document.getElementById("start").onclick = function() {
    animation = requestAnimationFrame(move);
}

document.getElementById("stop").onclick = function() {
    cancelRequestAnimationFrame(animation);
}