title: page transitions, how to slide a page in over the existing one
body: <p>I'm looking to achieve a page transition whereby a link to another page will, instead of loading the page, slide the next page in over the next one. Something like the <code>MOVE</code> transitions on this demo site: <a href="http://tympanus.net/Development/PageTransitions/" rel="nofollow">http://tympanus.net/Development/PageTransitions/</a>
  <br>Although this isn't quite right as this is all one page (i.e. the url doesn't change), they need to be transitions between separate pages.<br><br>I got as far as something like this:<br>
  HTML:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div class="container"&gt;
          &lt;a href="next-page.html" class="slide_page"&gt;Link&lt;/a&gt;
          TEXT GOES HERE
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>$(function(){
      // hide the div on page load and use a slidedown effect
      $('div.container').fadeOut(0, function(){
          $(this).slideDown(500);
      });
      // capture link clicks and slide up then go to the links href attribute
      $('a.slide_page').click(function(e){
          e.preventDefault();
          var $href = $(this).attr('href');
          $('div.container').slideUp(500, function(){
              window.location = $href;
          });
      });
  
  });
  </code></pre>
  
  <p>But this isn't quite right as this method slides the current page upwards, before sliding the next page downwards, but the url change here is good. Any suggestions would be greatly appreciated!</p>