Fading out a whole page with jquery

Question

So, I'm attempting to fade the page out when a user goes to another section of my website. After reading a bit on stack overflow, I have written the following code. But it just seems messy/ugly. Is there a proper way to fade out a webpage, or is it all hacky? It seems (at the moment) like my page is getting dumped before it has the chance to fade.

<link rel="stylesheet" href="http://www.catlard.com/styles/body.css" type="text/css"/>
<link rel="icon" href="http://www.catlard.com/caticon.ico" />
<link rel="shortcut icon" href="http://www.catlard.com/caticon.ico?v=2" />
<script src="http://code.jquery.com/jquery-latest.min.js" charset="utf-8"> </script>
<script type="text/javascript">
    $(document).ready( function(){
        $("html").hide();
        $("html").delay(250).fadeIn();  
        $(window).unload(function () {
            $("html").fadeOut();
        });
    });
</script>

Solution

Use fadeOut() jQuery function for document or "html":

$(document).fadeOut();

or

$("html").fadeOut();

---

After reading your comments I understand you want to fade out the page when clicking a link.

Don't use $(window).unload but detect the click events on the links and set the location manually preventing the default browser behavior.

// delegate all clicks on "a" tag (links)
$(document).on("click", "a", function () {

    // get the href attribute
    var newUrl = $(this).attr("href");

    // veryfy if the new url exists or is a hash
    if (!newUrl || newUrl[0] === "#") {
        // set that hash
        location.hash = newUrl;
        return;
    }

    // now, fadeout the html (whole page)
    $("html").fadeOut(function () {
        // when the animation is complete, set the new location
        location = newUrl;
    });

    // prevent the default browser behavior.
    return false;
});

Comments

[Catlard]

Okay, so, I've tried putting this in, but it dumps the page before it unloads. You can see my page the way it is -- www.catlard.com -- it doesn't work when you click on, say, the "Teachings" section, for example. Is there any way to get this to work? I've updated the code above to reflect your answer.

[Ionică Bizău]

@Catlard I've updated my answer. Use $(document).on("click", "a" handler) instead of unload.

[Catlard]

The code that you posted was magical, and solved all my problems. I shall strive to understand it! I think there are a few things I don't understand yet...most of it revolves around me not knowing what a hash is, or what the location object is. I can probably figure that out easily. But can you explain why return false prevents the default browser behavior? Is that just part of the .on() function in jQuery? Thanks a bajillion!

[Ionică Bizău]

@Catlard Good. See the comments in the code and for return false; part see this topic. For example, if you remove return false; from this code, the browser will load the new page (the new link) directly and the fade out effect will disappear. This is why we use it here and we set the new location from js side. return false; is also used when submitting a form via ajax (without the page reload). Read more information in the answer to the linked question. :-) If you have any questions just ask.