How do you make an html page fade out while another fades in?

Question

I have a client with an event planning site asking his pages to fade into one another. I have no idea how I can accomplish this. Any ideas? Is there anyway to do this withou

Answer 1

This should work, without relying on Ajax (jQuery) :

$(function(){

    /*
    Add this code to every page.

    We start by hiding the body, and then fading it in.
    */
    $('body').hide().fadeIn('fast');

    /*
    Now we deal with all 'a' tags...
    */
    $('a').click(function(){
        /*
        Get the url from this anchors href
        */
        var link = $(this).attr('href');
        /*
        Fade out the whole page
        */
        $('body').fadeOut('fast', function(){
            /*
            When that's done (on the 'callback') send the browser to the link.
            */
            window.location.href = link;
        });
        return false;
    });

});

Worth noting however is that if you're loading js at the bottom of the page (as we're often told to do), on a slow page load the page might be visible, then invisible, and then fade in again... Which would look very strange.

A solution would be to just hide the body in CSS, but you might, possibly, have visitors with JS turned off but CSS turned on, then they'll just have a blank page. Alternatively you could use a tiny amount of js at the top of the page (not relying on jQuery) to hide the body.

Lastly, however, why? I think if I visited your site these effects would begin to seriously annoy me pretty quickly. Why not just take the user to the page they asked for?