Flash like website intro with jQuery?

Is it possible to do something which would look like a flash intro to a website with jQuery/CSS? I only need to show a black screen with a logo for some seconds before I show the content to the user. I mean, I could try showing only the content of a div, but I don't know how I'd get that div to fit the whole screen... something like:

$(document).ready(function() {
$(body not(#intro-covering-page)).css("display", "none");
$('#intro-covering-page').delay(2000).fadeOut();
}); /* I st开发者_开发百科ill haven't figured how to properly make this work*/

and maybe having the before the main container. Any ideas?

Let your css hide #intro-covering-page

#intro-covering-page {
   display: none;
}

Then using js

$(function() { // that's short for  .ready()
    $('#intro-covering-page').delay(2000).fadeIn();
});

Of course, if we want to be sure about user's js status we do something like that

.js #intro-covering-page {
   display: none;
}

JavaScript:

$(function() {
    $('html').addClass('js');
    $('#intro-covering-page').delay(2000).fadeIn();
});

This will fit the whole screen, although it might look weird if it pops up too late, so you have to make it look good in one way or another.

css = {
    'width' : $(window).width(),
    'height' : $(window).height(),
    'position' : 'absolute',
    'background-color' : '#000000'
}

$(document).ready(function() {
    $(#intro-covering-page).css(css);
    $('#intro-covering-page').delay(2000).fadeOut();
});