My script isn't quick enough (hide/reveal/animate/delay issue) - help

My script isn't quick enough (hide/reveal/animate/delay issue) - help

Hi guys,


My aim is to reveal parts of the page at different intervals. My code works, but I'm getting all elements rendered before my script kicks in?

Any tips?


// Hide #footer until wanted
$(document).ready(function () {
$('#footer').css({
opacity: '0'
});
$('#footer').delay(3500).animate({
opacity: '1'
}, 2000);
});
// Body fadein order
$(document).ready(function () {
$('#header, #content').css({
opacity: '0'
});
$('#header').delay(1500).animate({
opacity: '1'
}, 600);
$('#content').delay(3500).animate({
opacity: '1'
}, 600);
});

Should I be controlling this with JS instead of CSS (opacity)?

Thanks,