Why is my CSS3/jQuery animation's performance so slow?
This one is faster: http://jsfiddle.net/JycdN/1/
I optimized the jQuery code itself. Also, its a bad idea to animate a "+=25px" style CSS value because each time you do that you are forcing the browser to make extra CSS calculations on top of the animation calculations. Instead of doing that, you might as well just use plain CSS3 animations. Check this out: http://matthewlein.com/ceaser/
Its better for animate() to have a static value (in this case, the original and raised positions which i've stored for each cube in the
live() method automatically adds the events to the cubes whenever they are recreated, so there's no need to set the events inside the refreshcubes function. Also, James Montagne pointed out that using the
live() method makes the whole thing behave like Daniel described in his answer (which is faster).
EDIT: I've made it even faster by using the
on() method instead of
live(). The event context for hovering is now on each cube instead of on the whole document. See this question for details: How does jQuery's new on() method compare to the live() method in performance?.
Wherever possible, make one single jquery object and reference to it with a variable, that way you don't recreate a new object every time.
Overall, I noticed quite an increase in performance, but its still slower than I'd imagine capable. Maybe the CSS transforms are re-calculated every time the cubes are moved (even by a pixel).
EDIT: As addedlovely suggested, modifying the jQuery.fx.interval helped make it a little faster.
I think you'll have more luck drawing the cubes in 2D canvas or with 3D webGL canvas.
Try using three.js or processing.js to draw the cubes and animate them.
EDIT: I've made it even faster using hardware-accelerated CSS3 animations in Google Chrome (other browsers are still developing these CSS3 features so it only works in CHrome for now): http://jsfiddle.net/trusktr/JycdN/35/
View additional discussion.
This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here