title: Remove old content, load in new content, animate new content with JQuery
body: <p>I apologize that I am very much a novice with javascript. I have sort of picked up aspects of JQuery to augment my website designs but I never properly learned the fundamentals or syntax.</p>
  
  <p>Here is what I want to do: When a user clicks on a a link in the list #nav the div #content will be animated up off the top of the screen by the height of #content. Then #content will be hidden. Then #content will be replaced by new content loaded in from the page that is linked to with the link the user clicked on in #nav. #content needs to remain hidden then move below the screen by the height of the viewport. Then #content will be made visible and animated back to its original location. Below is the code I mocked up but it isn't working properly.</p>
  
  <p>Thanks!</p>
  
  <pre><code>$(document).ready(function() {
  
  $('#nav li a').click(function(){
  
      var toLoad = $(this).attr('href')+' #content';
  
      var oldHeight = $('#content').css("height");
  
      var viewportHeight = $(window).height();
  
      $('#content').animate({
          top: "-" + oldHeight
      }, 'slow');
  
      $('#content').hide();
  
      $('#content').load(toLoad);
  
      $('#content').animate({
          top: viewportHeight + "px"
      });
  
      $('#content').show();
  
      $('#content').animate({
          top: "0px"
      }, 'slow');
  
      return false;
  
  });
  
  });
  </code></pre>