Fade entire page with jquery

Question

So, I'm trying to fade a page when a user goes to another section of my site. After reading a little about stack overflow, I wrote the following code. But it just seems dirty / ugly. Is there a way to fade out a webpage or is it all hacked? It seems (at the moment), as my page is reset before it has a chance to disappear.

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

Answer 1

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

 $(document).fadeOut(); 

or

 $("html").fadeOut(); 

---

After reading your comments, I understand that you want to disappear on the page when you click a link.

Do not use $(window).unload , but detect click events on links and manually set the location to prevent 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; });