title: Jquery fadeIn/fadeOut animation issues
body: <p>I am using Jquery FadeIn/FaeOut to show and hide content on my page. Like so:</p>
  
  <pre><code>$('.subnav_company').click(function(){
                      $('.aboutcontent').fadeOut('slow');
              $('.company').fadeIn('slow');           
                      }); 
  </code></pre>
  
  <p>My problem is that because the div '.company' is positioned below '.aboutcontent' when '.company' is shown it appears below '.aboutcontent' until the div has hidden fully, creating a unsmooth transition effect.</p>
  
  <p>How can I make the transition between showing and hiding the divs smooth? Not jumpy. Here is the HTML:</p>
  
  <pre><code>&lt;div class="aboutcontent developers"&gt;
  &lt;h1&gt;Developers&lt;/h1&gt;
  &lt;h4&gt;The developers are the best&lt;/h4&gt;
  &lt;p&gt; we have some great developers&lt;/p&gt;
  &lt;/div&gt;
  &lt;!--End aboutcontent developers--&gt;
  
  
      &lt;div class="aboutcontent company"&gt;
      &lt;h1&gt;Company&lt;/h1&gt;
      &lt;h4&gt;offers a complete management tool . It's an easy to use and efficient way to manage and plan  stuff. It allows people to communicate and get along.&lt;/h4&gt;
      &lt;/div&gt;
      &lt;!--End aboutcontent company--&gt;
  </code></pre>