DIV Splash Screen

Question

How would I create a welcome screen on my web site? For Example: I have an image and a link that says "ENTER" when the user clicks enter the web site appears. How would I do that? Also if possible with JavaScript or JQuery, When the user clicks "ENTER", would it be possible to crossfade from the splash screen to the web site? I want that the link be functional within any element/tag on the DIV splash.

I have this code:

$('.Intro').click(function()
{
    $(this).parent('#Intro').fadeOut(1000);
});

But it only works with:

<DIV id="Intro">
<A href="#" class="Intro" style="color: #FFF">ENTER</A>
</DIV>

And not with:

<DIV id="Intro">
<DIV class="EnterII">
<A href="#" class="Intro" style="color: #FFF">ENTER</A>
</DIV>
</DIV>

Therefore, just within the DIV Intro...

Answer 1

Why do you need to complicate?

As identifiers must be unique. Simply use ID selector

$('#Intro').fadeOut(1000)

Answer 2

<DIV id="Intro">
 <DIV class="EnterII">
   <A href="#" class="Intro" style="COLOR: #FFF !important">ENTER</A>
 </DIV>
</DIV>

With a little bit of indentation you can see that in this case the parent() function will return EnterII so that is the div that will be faded out. Use jquery closest() in order to get intro

$('.Intro').click(function(){
     $(this).closest('#Intro').fadeOut(1000);
 });

Answer 3

Have you tried just:

$('#Intro').fadeOut(1000);

instead of

$(this).parent('#Intro').fadeOut(1000);