Splash page (not my idea) using jQuery to fadeIn/Out before going to first real page of site

fadeout, jquery

Solution

you have to use `window.location` in your callback method like so:

$(".link").click(function(e) {
        $('.logo_container').fadeOut(1000, function(){
           window.location = $(this).attr("data");
        }); 
});

otherwise `window.location` will be called at the same time as the fade out event

Problem

I am in the final throes of building a site, and the client wants a splash page. Mine is not to question why, mine is to get paid and fly... So, here's the sequence of events I'm looking for: Splash page opens. Logo fades in. Use clicks to enter. Logo fades out. First 'real' page of site opens. I've got the first three events to work, and the fourth. It's getting the logo to fade out before opening the first real page. Here's what I've got: ``` <div class="logo_container link" data="commercials.php"> <img src="images/logo_intro.jpg" alt="intro" /> </div> <script type="text/javascript"> $(function() { $('.logo_container').hide(); $('.logo_container').fadeIn(1000); $(".link").click(function(e) { $('.logo_container').fadeOut(1000); window.location = $(this).attr("data"); }); }); </script> </div> ``` But I'm not getting the fadeOut. It's just jumping to the attribute called in window.location, which is commercials.php.

Original source