smooth transition between pages when redirecting with jquery

Question

I am trying to get a smooth transition when I redirect users. First by fading out the page then redirecting and and fadeIn.

Here is my redirect

if ( data.redirect != undefined )
{
        $("#toppanel").slideUp(1000);       
        $("#content").fadeOut(2000, function() {
        window.location = data.redirect;
    });

My next page has a javascript in the header like this:

jQuery(function ($) {

    $("div.container_16").first().hide();
    $(".grid_16").first().hide();

    $("div.container_16").first().fadeIn(2000);
    $(".grid_16").first().slideDown(4000);

This almost work except for a few milli sec where the second page loads then turns blank and fades in. How do I fix this? Do I need to change the css or html?

Answer 1

A simple fix to this would be:

CSS

body{
    display:none;
}

JS

jQuery(function ($) {
    $('body').show();
    $("div.container_16").first().hide();
    $(".grid_16").first().hide();
    $("div.container_16").first().fadeIn(2000);
    $(".grid_16").first().slideDown(4000);
}

You should know that 1 second is a lot of time for a web user. And basically taking 6s extra to just move to another page could be very costly to your user base. I hope you offer a solution without these kind of effects.

UPDATE

CSS

/*
 * overflow => so you don't get a scrollbar
 * visiblity => so all content is hidden
 * background => so you get a black background
 */

.bodyExtra{
    overflow:hidden;
    visibility:none;
    background:#000;
}

JS

jQuery(function ($) {
    $(document).ready(function(){
        $("div.container_16").first().hide();
        $(".grid_16").first().hide();
        $('body').removeClass('bodyExtra');
        $("div.container_16").first().fadeIn(2000);
        $(".grid_16").first().slideDown(4000);
    });
}

The logic behind this is to make your page work as a buffer zone. You then hide the elements you want to fade in, remove the class from body and fade everything in.

UPDATE 2013.09.01

I see this answer is still generating some traffic and I have to admit, since the initial answer in 2011, I have an addition to make

HTML/CSS

<noscript>
    <style type="text/css">
        .bodyExtra{
            overflow:auto !important;
            visibility:visibile !important;
        }
    </style>
</noscript>

This can also be done with a <link rel="stylesheet" type="text/css" href="no-js.css" /> tag.
The idea behind this is to fix the disabled javascript issue described by theazureshadow in the comments.