title: jquery slide effect, hide one div and show another
body: <p>I have this <a href="http://jsfiddle.net/ggfA6/7/" rel="nofollow">JSFIDDLE</a> setup demonstrating my problem, I'm sure that it's a simple fix.</p>
  
  <p>I am trying to slide out the blue div to the left, while sliding in the red div from the right, at the same time. The sliding animations are working how I want them to, however when the red div is sliding in it appears below the blue div. How can I get it to be positioned to the right of the blue div instead of appearing beneath it during the animation?</p>
  
  <p>code:</p>
  
  <pre><code>$("#slide2").on('click', function(){
      $( "#blueDiv" ).effect( "slide", hideoptions, 1000);
      $( "#redDiv" ).effect( "slide", showoptions, 1000);                
  });
  </code></pre>