title: Sliding web page transitions (jQuery)
body: <p>Although there are similar questions on this site, non seem to quite answer my question...</p>
  
  <p>I have a 5 static page website which looks like the inside of a hair salon. I would like each page transition looking like the user is sliding across (looking around) the salon. This means the content (.content div) needs to slide out, then the next page slide in. If possible, it would be good to be able to add different classes to links to change which way the page and new page slide out/in (ie from right to left or left to right). It should be noted that the navigation bar, logo and footer will not be sliding as they are in the same place on every page.</p>
  
  <p>I have managed to get a fade effect with jQuery:</p>
  
  <pre><code>$(".content").css("display", "none");
  $(".content").fadeIn(2000);
  $("a.transition").click(function(event) {
      event.preventDefault(); 
      linkLocation = this.href; 
      $(".content").fadeOut(1000, redirectPage); 
  });
  function redirectPage() {
      window.location = linkLocation;
  }
  </code></pre>
  
  <p>However, this is very clunky in reality, and I would like to be able to slide the pages in a way similar to jQuery easing. I don't want to have a one page website for SEO reasons. I'm not sure if ajax is the answer, but never explored it so have no experience in using it.</p>
  
  <p>Thanks,</p>
  
  <p>Jamie</p>