Question

Below is my code, it flashed the site for about a split second before it loads the page how do I stop it from doing this so it just fade in the Divs smoothly when the new page is loaded?

$('#home').animate({'opacity' : 0}, 0);
fadeInDivs(['#home']);
function fadeInDivs(els) {
e = els.pop();
$(e).delay(750).animate({'opacity' : 1}, 1000, function(){
   if (els.length) fadeInDivs(els);
});

};

Answer 1

As noted, you need to set #home to be invisible in CSS. However, if you want your page to be visible when JS is disabled, you could do something like:

<script type="text/javascript">
    document.write(
        "<style type='text/css'>" +
        "#home { opacity: 0; }" +
        "</style>"
    );
</script>

… so the css will only be added when JS is enabled. This may be overkill these days.