jQuery redirect - fadeout/fadein

Question

I'm working on a redirect script in jQuery. This is my script so far;

$(document).ready(function(){
  setTimeout(function() {
   window.location.href = "http://test.example.com/;"
  }, 5000);
});

This script will redirect after 5 seconds as I want to. What I'm trying to do is to fadeout the page before redirect and then fadein the new document. Is this possible to do?

Thanks for any help!

Answer 1

You could do something like this

 $(function(){
    $("body").fadeOut(1000,function(){
       window.location.href = "http://test.example.com/;"
    })
 });

On the new page just write:

 $(function(){
    $("body").hide();
    $("body").fadeIn(1000);
 })

This will fade out the entire page by the body element.

On your new page it will initially hide the body then fade it in.

In fact you could make this a global thing with an event listener like this:

 $(window).bind('unload', function(){
   ....
 });

If you wanted this whole thing to start 60 seconds after the page loads you could do this:

 $(function(){
    setTimeout(function(){
        $("body").fadeOut(1000,function(){
           window.location.href = "http://test.example.com/;"
        })
    },60000)
 });

Answer 2

Have you considered creating a mask?

Make a div, position it with css on top of your page and it's width and height to match the document width and height (or whatever width and height you need). Then just fade that in and out.