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 is being done like so:

$('#lookbook').stop().animate({left: -((lookbook-1)*825)+'px'}, { duration: 800, complete: cap_fade(1)});

Example link:

http://mayfourteenth.com/w/lookbook?preview=1

Answer 1

I've tested in Firefox, Chrome(dev) and Safari on windows and the animation stutters in all browsers(but more in FF though).

To increase JavaScript performance you could get rid of all the getElementById or $("div#mydividentyfier") calls. If you store them in variables instead they will be cached. Example: It could increase performance quite a bit to do this:

var lookbook = $('#lookbook');
var look_caption = $('#look_caption');
if (lookbook.length) {    
    lookbook.width(lookbook).width()*$('#lookbook img').length)
    if (look_caption) {
        look_caption.html(lookcaps[0]);
        look_caption.fadeIn();
    }

Instead of:

if ($('#lookbook').length) {    
    $('#lookbook').width($('#lookbook').width()*$('#lookbook img').length)
    if ($('#look_caption')) {
        $('#look_caption').html(lookcaps[0]);
        $('#look_caption').fadeIn();
    }

I would also recommend using data URIs for the images as it reduces the amount of httpRequests you have to make to get the page loaded.