HTML DOM Drawing Transaction in Javascript?

Question

Is there a way to encapsulate several DOM manipulating commands in a transaction so that the content would not "flicker about"? Something like this:

window.stopDrawing(); // start transaction
$("#news").append("<div>a new news item</div>");
// ... do something more
$("#news").css("top", "-150px");
window.startDrawing(); // stop transaction

Answer 1

Everytime you must update a large set of elements just set up a function including all the operations, call mozRequestAnimationFrame(or webkitRequestAnimationFrame), only after your function is finished executing completely it will draw your changes to the screen.

More at: https://developer.mozilla.org/en/DOM/window.mozRequestAnimationFrame