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.

Answer 2

You're getting what is called a "flash of unstyled content" or FUC. You could wrap your second page in a container and hide that via css (display: none;) and then fade in when it's loaded.

Answer 3

Don't use pure css to hide the content originally. If you do, users with JavaScript turned off will not see your content. Instead, only hide when javascript is available.

.js-enabled div.container_16,
.js-enabled .grid_16 {
  display: none;
}

Include this line of javascript at the very top of the body:

$(document.body).addClass('js-enabled');

Then in your animation function, after you've hidden .grid_16, include this line to return things to normal:

$(document.body).removeClass('js-enabled');

If you want, you can be more specific and target the hiding styles to the particular elements you want to hide. But I don't know if that's practical for your case -- too few details.