Optimizing Jquery Animation for a Single Page Website

I've was recently tasked to create a HTML driven webpage that will emulate basic Flash transitions and animations, which made me turn to jquery, naturally. The website has four different pages, each with its specific background and a small paragraph of text.

Easy? Apparently not so for me. When I got the interactive mock up running for approval, I ran into the issue of sluggish animation specific only to (surprise, surprise) Macs with monitors above 18". The PCs I ran my tests on worked perfectly across all major browsers - Chrome, IE9 and FF. For Macs above 18", however, it was FF that worked best while the rest was terrible.

I've tried means and ways to optimize the jquery codes and even resorted to preloading all the images into the browsers cache with an index.html page and then redirecting the user to the actual web page, all in hope that there could be less stress on the processing time.

Unfortunately, nothing worked.

This is a single page setup so that could possibly be one of the major factors contributing to the sluggishness, but it doesn't explain why it works fine on PCs and below 18" Macs.

In any case, here are snippets of my codes for the animation to fade in elements on load and to transit between pages/sections:

$(document).ready(function(){

$("#home-button").click(function(){
    $("#home").fadeTo(2000, 1);
    $("#location").fadeTo(2000, 0);
    $("#services").fadeTo(2000, 0);
    $("#contact").fadeTo(2000, 0);
    $("#bg-img-1").fadeTo(2000, 0);
    $("#bg-img-2").fadeTo(2000, 0);
    $("#bg-img-3").fadeTo(2000, 0);
    $("#bg-img-4").fadeTo(2000, 1);});

$("#location-button").click(function(){
    $("#home").fadeTo(2000, 0);
    $("#location").fadeTo(2000开发者_开发知识库, 1);
    $("#services").fadeTo(2000, 0);
    $("#contact").fadeTo(2000, 0);
    $("#bg-img-1").fadeTo(2000, 0);
    $("#bg-img-2").fadeTo(2000, 1);
    $("#bg-img-3").fadeTo(2000, 0);
    $("#bg-img-4").fadeTo(2000, 0);});

$("#services-button").click(function(){
    $("#home").fadeTo(2000, 0);
    $("#location").fadeTo(2000, 0);
    $("#services").fadeTo(2000, 1);
    $("#contact").fadeTo(2000, 0);
    $("#bg-img-1").fadeTo(2000, 0);
    $("#bg-img-2").fadeTo(2000, 0);
    $("#bg-img-3").fadeTo(2000, 1);
    $("#bg-img-4").fadeTo(2000, 0);});

$("#contact-button").click(function(){
    $("#home").fadeTo(2000, 0);
    $("#location").fadeTo(2000, 0);
    $("#services").fadeTo(2000, 0);
    $("#contact").fadeTo(2000, 1);
    $("#bg-img-1").fadeTo(2000, 1);
    $("#bg-img-2").fadeTo(2000, 0);
    $("#bg-img-3").fadeTo(2000, 0);
    $("#bg-img-4").fadeTo(2000, 0);});});

Here are my CSS styles for the background image and some graphic elements which has to resize and crop according the browser's size:

img.bg{
    min-height: 100%;
    min-width: 900px;
    width: 100%;
    height: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index:-4;}

#bg-img-1,#bg-img-2, #bg-img-3, #bg-img-4{
opacity:0;}

img.d-4{
min-height: 100%;
min-width: 1024px;
width: 92%;
height: auto;
position: fixed;
top:0;
left:0;
z-index:-3;
opacity:0.3;}

img.d-5{
min-height: 100%;
min-width: 1024px;
width: 92%;
height: auto;
position: fixed;
margin-left:-50px;
z-index:-3;}

Any help or opinions on how to optimize this further and prevent sluggish issues is greatly appreciated.

Thank you guys! :)

Well, you cannot do much to optimize the animation process itself (unless you want to modify jQuery itself). What you can do is to minimize your jQuery constructor function calls:

$("#home-button").click(function(){
    $("#homem, #bg-img-4").fadeTo(2000, 1);
    $("#location, #services, #contact, #bg-img-1, #bg-img-2, #bg-img-3").fadeTo(2000, 0);
});

However, this will have no impact on the animation itself. Make sure you're using the latest version of jQuery so it can invoke requestAnimationFrame which will probably fix some of your issues.

If that doesn't help to animate more fluent, you could probably animate in sequence which would take away the processing time. Could look like:

$("#home-button").click(function(){
  (function _loop( nodelist ) {
      $( nodelist.shift() ).fadeTo( 2000, 0, function() {
          _loop( nodelist );
      });
  }( ["#location", "#services", "#contact", "#bg-img-1", "#bg-img-2", "#bg-img-3"] ));
});

Example: http://jsfiddle.net/FEYMQ/

This optimisation will create less jQuery objects, so should see a performance gain, and I am not sure, but putting all the animations in one function call will probably also see a performance gain in the animation too.

$("#contact-button").click(function(){
    $("#home, #location, #services, #bg-img-2, #bg-img-3,#bg-img-4").fadeTo(2000, 0);
    $("#contact, #bg-img-1").fadeTo(2000, 1);
});

Thank you for the advice jAndy and Billy Moon. Those are some great practices that I've unwittingly failed to comply with when churning out the codes.

The page transitions are now fine across all browsers because the sluggishness can only be observed under intense scrutiny; to the naked eye, it is more or less acceptable.

I think I need to apologise first and foremost to everyone because I left out a very important snippet of codes which I realised is causing the bulk of the problem. The big issue here is when I have 2 graphics with ids - #md4 and #md5 - sliding in from the left and fading in, it starts to get really jerky. The animation only happens once: upon entry to the homepage. The jquery for the animation:

$(document).ready(function(){
$('#md4').fadeTo(2000, 1);
$('#md5').animate({left: "50px" }, 1800);
$('.home').fadeTo(2000, 0.8);
$('#bg-img-4').fadeTo(900, 1);
$('#menu').fadeTo(2000, 1);
$('#copyright').fadeTo(2000, 1);});

Take note also that the two graphics mentioned with ids #md4 and #md5 have been styled to fit, crop and stretch proportionately to the browser size. Here are the codes that I've provided before but want to embed again just so we don't get confused:

#md4, #md5{
min-height: 100%;
min-width: 1024px;
width: 92%;
height: auto;
position: fixed;
top:0;
left:0;
z-index:-3;
opacity:0.3;}

As previously mentioned, I've tried to tackle the issue by creating an index.html page to load all the images into the cache before coming to the home page and loading all the jquery animations. In theory, it should take a fair bit off the load for processing, but the performance is still very much sub par in Macs with screens above 18", regardless of the browsers, but with FF version 4 being the best. The issue is also occurring on Mac screens below 18", but isolated only to FF version 4 and below.

I have toyed with the idea of sequencing the animation to happen consecutively rather than concurrently, but I have hesitated in part because I was afraid I would compromise too much on the intended effect of everything happening at once for just a wee bit of performance booster. Some advice on that will be very much appreciated too.

So the big question here is: Bearing in mind all the stated parameters (graphics and divs fading in all at the same time on page load), what can I do optimize the animation across all the latest major browsers and screen sizes such that there will be minimal sluggishness.

Thank you very much in advance guys. Appreciate all the help rendered so far from the bottom of my heart.