jQuery animations are choppy and stutter in Firefox

Question

I like to think I\'m not a dummy, but I can\'t get my jQuery horizontal slideshow to animate smoothly especially in FireFox (on a Mac). Anyone have advice?

Animation

Answer 1

The animation looks smooth for me in Chrome. However, I believe there are several things you can do to improve smoothness:

First, it's fine to preload all of the images in advance as you do here (at the top). However, displaying them all at once, as in the "Example link", hurts performance, as they are all animating at once:

 
    
 
    
 
    ...
    
 
 

Instead of doing this, you can simply cue up the next and previous image on either side of the current image, but then don't have the rest of the images in the page until they're needed. (Preloading them is still fine though.)

Other things which can improve performance slightly are things like the following:

1. Use smaller (by pixels and/or file size) images.
2. Make minor code optimizations by computing things in advance.
3. Use a stand-alone animation library instead of jQuery.