9

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>
tshepang
  • 12,111
  • 21
  • 91
  • 136
Catlard
  • 853
  • 6
  • 13
  • 30
  • 2
    The browser would dump the page (in most cases) before your animation would be finished. – ahren Oct 16 '13 at 07:33
  • 1
    `$(document).ready( function(){ $("html").hide();` Are you trying to hide the page before anyone can see it? `$(document).ready` will occur when other content has loaded, so my guess at the moment you'll probably see the page load for a second, then flicker & dissappear, then fadeIn? If so you probably want to use `display:none` prior to loading instead, and not bother with `$("html").hide();` – SubjectCurio Oct 16 '13 at 07:34
  • Well, I'm not seeing that flickering at the moment, but it seems reasonable that it would happen. But the more pressing issue: wouldn't display:none just cause non-jquery happy computers to just not see my website? – Catlard Oct 16 '13 at 09:26

1 Answers1

23

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;
});
Ionică Bizău
  • 109,027
  • 88
  • 289
  • 474
  • 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. – Catlard Oct 16 '13 at 09:24
  • @Catlard I've updated my answer. Use `$(document).on("click", "a" handler)` instead of `unload`. – Ionică Bizău Oct 16 '13 at 10:14
  • 1
    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! – Catlard Oct 19 '13 at 12:20
  • @Catlard Good. See the comments in the code and for `return false;` part see [this topic](http://stackoverflow.com/q/128923/1420197). 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. – Ionică Bizău Oct 19 '13 at 15:57