How can I make my jQuery animations smoother?

I have a page at: http://staging.similarblue.com/portfolio/

For some reason I can't get the animations to run smoothly. YSlow says "The page has a total of 51 HTTP requests and a total weight of 1425.2K bytes with empty cache." My guess is the animations are running slow because of the amount of images on the page (and therefor more images to move on animation). Also possibly because of the background image.

Would having a lot of images on the page make the animations slow?

Does having a large fixed image background make animations slow?

If you know YSlow and Firebug well, could you take a look and see where I could optimize?

Here's the code to animate the drop-down when you click an image:

$('#client-' + currentClient).slideUp('fast',function() {
  slideItDown(id, function() {
    scrollTo(id);
  });
});

function slideItDown(id, callback) {
  $('#client-' + id).slideDown('fast',callback);
}

function scrollTo(id, callback){
  $('html,body').animate({
      scrollTop: $('#client-thumb-' + id).offset().top + 72
    },'fast','linear',callba开发者_运维知识库ck);
}

Thanks!

Here's what I see as the main problem. During the animation, the whole page is getting taller. That's making it look a little choppy-- the scroll bar on the right is moving and the page is shifting down. If you can eliminate that it will help. (You can have a white div a the bottom and animate its height down in unison with the div you are opening up. Alternatively, it can open up "on top of" whatever is below it, and not change the height.)

As far as getting the speed up, this I can't tell yet. Speeding them up or slowing them down sometimes helps, as does fading in content after the space is made available. I think getting the height not to change may mostly do it.

I like the overall affect, but the way it appears is a but rough. You can make the whole page appear much smoothly by taking control of the load order of elements as they display. When you pre-load an image (Image.new.src='/img.gif'), it blocks the rest of the JS from running. This might seem bad, but you can force images to load in the proper order-- so you can load your background image before the rest of the page draws, if that's what you'd prefer. Really, you can animate the display of the page with just a little work.

Good luck!

After just a bit of fiddled with your page in Chrome. It seems that the -webkit-background-size: cover; is your problem. When it is removed your animation runs smoothly.

You could also try using CSS transitions for the animation. Those are hardware (read GPU) accelerated, so the animation will run smoother anyhow.