CODEWITHSUNDEEP
jqueryfadeout
Adam
Adam

Reputation: 1022

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

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.

Upvotes: 3

Views: 788

Answers (3)

Chris
Chris

Reputation: 3817

The window.location gets updated immediately after the fadeOut is started, so you never get chance to see it. Delay the change of .location by a method suitable for your framework (e.g. in MooTools it would be chain - I don't know jquery), or just schedule it to happend 1000ms in the future using the standard setTimeout().

Upvotes: 0

Andrew Hall
Andrew Hall

Reputation: 3073

You need to use a callback to see when the fadeOut has completed.

Example from the documentation:

$('#clickme').click(function() {
  $('#book').fadeOut('slow', function() {
    // Animation complete.
  });
});

Replace animation complete line with window.location = $(this).attr("data");

Upvotes: 1

clem
clem

Reputation: 3366

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

Upvotes: 6

Related Questions