title: Fading Between Div's with Jquery
body: <p>I have the following HTML code:</p>
  
  <pre><code>&lt;section&gt;
  
  &lt;div id="first"&gt;
  ---content
  &lt;/div&gt;
  
  &lt;div id="second"&gt;
  ---content
  &lt;/div&gt;
  
  &lt;/section&gt;
  </code></pre>
  
  <p>Upon page load, the second div and it's contents are invisible (I don't know if it's better to use .hide() or CSS).  I would like to, using Jquery, upon some interaction on the page, make the first div fade out and be replaced with the second div.</p>
  
  <p>On my own so far I've used fadein() and fadeout(), however it makes the divs jump around on the page.  I'm trying to seamlessly fade out the contents of div 1 and replace with div 2, consuming the exact space as div 1 and without making the formatting of the page jump around.</p>