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 ( dat         


        

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

This can also be done with a tag.
The idea behind this is to fix the disabled javascript issue described by theazureshadow in the comments.