title: Load content with AJAX and animation - jQuery
body: <p>I need your help! </p>
  
  <p>I need some help to add some animation for my code. Now it works like - 
  Click on link -> fade in text -> click on another link -> fade out current text -> fade in new text. </p>
  
  <p>What I want is like this - <strong>Click on link</strong> -> #content animates down to xx:px (depending on content height that loads in) -> fade in text -> <strong>Click on link</strong> -> current text fades out and #content animates up -> #content animates down  to xx:px (depending on content height that loads in) -> fade in text</p>
  
  <p>Here is the code so far...</p>
  
  <blockquote>
    <p><strong>Updated</strong> here is the jsfiddle - but the ajax thing don´t work <a href="http://jsfiddle.net/jelm/7zLW5/2/" rel="nofollow">http://jsfiddle.net/jelm/7zLW5/2/</a>
    Or you can take a look at my test page <a href="http://landetdigital.se/olaselmen/" rel="nofollow">http://landetdigital.se/olaselmen/</a></p>
  </blockquote>
  
  <pre><code>$(document).ready(function() {  
      $('.menu li a').click(function() {
  
         $('#contentHolder').fadeOut("fast");
          var targetPage = $(this).attr('href');
  
      setTimeout(function() {
          $('#content').load(targetPage, function() {
              $('#contentHolder').fadeIn("slow");
          });
      });
  
   return false;
  });
  });
  </code></pre>