Geek asks and answers

Screensaver (not my idea) using jQuery for fadeIn / Out before going to the first page of the site

I am in the final stages of creating a site, and the client needs a pop-up page. Mine should not doubt why, mine should pay and fly ...

So, here is the sequence of events I'm looking for:

The splash page opens. The logo disappears. Use the buttons to enter. The logo disappears. The first "real" page of the site opens.

I have the first three events, and the fourth. This makes the logo disappear before opening the first real page.

Here is what I have:

<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 do not get fadeOut. It just jumps to an attribute called in window.location, which is commercials.php.

+3
source share
3 answers

window.location , :

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

window.location fade out

+6

, , fadeOut.

:

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

window.location = $(this).attr("data");

+1

window.locationis updated immediately after fadeOut is launched, so you can never see it. Replace the change .locationwith a method suitable for your environment (for example, in MooTools it will be a chain - I do not know jquery) or just plan that it will happen in 1000 ms in the future, using the standard one setTimeout().

0
source

More articles:


All Articles