Help with sleep / delay function

Firstly, apologies as I’m a designer, and so have limited knowledge of JS.

I’ve been asked by a client to have a web page display a background image before loading up some main content.

I’m not entirely convinced by the whole idea, but he still seems keen…

Anyway, I’ve gotten as far as using a bit of jquery to fade in the content:


<script type="text/javascript">
$(window).ready(function(){
  $('body').hide().fadeIn(2000);
});
</script>

That you can see here:

Travel Trade Only

However, in an ideal world, we’d have the world image display for a second or two before the fade starts, so would like (if possible) to have:

background loads > 2 second delay > content fades in

rather than:

background loads > content fades in

I had a rummage, and found the delay function, which I tried here:


<script type="text/javascript">
$(window).ready(function(){
  $('body').hide().[B]delay(2000)[/B].fadeIn(2000);
});
</script>

Which results in:

2 second delay > background loads > content fades in:

Travel Trade Only

If anyone could help get this working that would be much appreciated!

Try this:


$(window).ready(function(){
  $('#contentWrapper,body').hide();
  $('body').fadeIn(2000);
  setTimeout(function() { $('#contentWrapper').fadeIn(2000) }, 2000);
});

Off Topic:

The background isn’t wide enough for my 22" WS (1680x1050), it looks really cut off …