title: fadeIn and fadeOut effect between pages
body: <p>I'm trying to make some transition effects for my page. </p>
  
  <p>The goal is to fade in the page when you first enter, and then when you click a link, the page will fadeout and fadein the destination page. But It won't get the destination url so when i click a link, the url changes to <em>www.example.com/#undefined</em> </p>
  
  <p>Any suggestions?</p>
  
  <pre><code>jQuery.holdReady(true);
  jQuery("body").css("opacity", 0);
  jQuery.holdReady(false);
  jQuery(function ($) {
      $("body").fadeTo(1500, 1);
      $(document).on("click", "a", function (event) {
          event.preventDefault();
          $("body").fadeTo(1500, 0, 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)
              $("body").fadeTo(1500, 1, function () {
                  // when the animation is complete, set the new location
                  location = newUrl;
              });
              // prevent the default browser behavior.
              return false;
          });
      });
  });
  </code></pre>