title: Crossfade Two divs Using jQuery
body: <p>I have a multi-step webform on a website. When a person clicks next the div one fades out as div two fades in. The problem I am seeing is while div one fades out div two fades in below div one and then jumps once div one fades out. </p>
  
  <p>How do I prevent this and have them actually crossfade? </p>
  
  <p><em><strong>HTML</em></strong></p>
  
  <pre><code>&lt;div class="step-1"&gt; 
    &lt;!-- CODE --&gt;
  &lt;/div &gt;
  
  &lt;div class="step-2"&gt; 
    &lt;!-- THIS DIV IS HIDDEN TO BEGIN WITH --&gt;
  &lt;/div &gt;
  </code></pre>
  
  <p><em><strong>JS</em></strong></p>
  
  <pre><code>$( ".step-1-next" ).on( "click", function() {
      $( ".step-1" ).fadeOut( "slow" );
      $( ".step-2" ).fadeIn( "slow" );
      return false;
  });
  </code></pre>