title: Cross Fade animation
body: <p>I would like the top_content function to cross fade with #test and #test1. Right now the divs #test, and #test1 are using a simple toggle but I would like them both fade out and in at same time.</p>
  
  <pre><code>$(document).ready(function () {
      $('#test, #test1').hide();
      $('.home').click(function () {
          var id = $(this).html().toLowerCase();
          var $top_content = $('#' + id + ':not(:visible)');
          if ($('.current').length === 0) {
              toggleContent($top_content);
          } else {
              $('.current').toggle(400, function () {
                  toggleContent($top_content);
              });
          }
      });
  
      function toggleContent(top_content) {
          top_content.toggle(400);
          $('.current').removeClass('current');
          top_content.addClass('current');
      }
      $("a.home").click(function () {
          $('.active').not(this).removeClass('active');
          $(this).toggleClass('active');
      });
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/FJ8DV/" rel="nofollow">http://jsfiddle.net/FJ8DV/</a></p>