jQuery fade to a different page

Question

I have a landing page with a short jQuery animation triggered by a button click and after the animation is over, I want it to redirect to another page on the server but I want it to fade from the landing page to the other page.

Currently I have it set up so it fades the document body right before redirecting to the other page but it fades to white so you can see a white background instead of my colored background when the fade begins. I'm guessing there's a better way to accomplish this effect.

Here's my current code:

$(document).ready(function(){
          $("#button").click(function(){
            $(".left").animate(
                {left:'50%'}, 800, 'linear'
            );
            $(".right").animate(
                {right:'50%'}, 800, 'linear'
            );
            $(".top").stop(true, true).delay(800).animate(
                {top:'36px'}, 800, 'easeOutBounce'
            );
            $(".bot").stop(true, true).delay(800).animate(
                {top:'492px'}, 800, 'easeOutBounce'
            );
            $(document.body).delay(1900).fadeTo("slow", 0);
            setTimeout(function () 
            { window.location.href = "start.php"; }, 2000);
          });
        });

Answer 1

Something like this should work if you are willing to ditch the redirect. It should be a smoother transition:

$(document).ready(function(){
  $("#button").click(function(){
    $('#hiddenContainer').load('URL TO OTHER DOC HERE');
    $(".left").animate(
        {left:'50%'}, 800, 'linear'
    );
    $(".right").animate(
        {right:'50%'}, 800, 'linear'
    );
    $(".top").stop(true, true).delay(800).animate(
        {top:'36px'}, 800, 'easeOutBounce'
    );
    $(".bot").stop(true, true).delay(800).animate(
        {top:'492px'}, 800, 'easeOutBounce'
    );
    $('SELECTOR OF YOUR OTHER CONTENT').delay(1900).fadeOut(800, function(){
        $('#hiddenContainer').fadeIn(800);
    });
  });
});

http://api.jquery.com/load/

Thats the general idea, hope it helps!

Answer 2

This is only going to to work if you:

• load the second page via AJAX into memory or a hidden DIV
• fade out what's already on the screen
• swap the new page into the DOM (which is set to already been faded)
• fade in the new content

Answer 3

Maybe have a couple block level elements in your page, absolutely position on top of one another. Set the z-index of the empty one to below the one with the current page. Then load the new page into the empty one. Then fade the top one, remove it's contents, and swap the z-indexes.