title: How to use JQuery UI slide effect to seamlessly slide out one div and slide in another div?
body: <p>I am using</p>
  
  <pre><code>$( "#viewPort" ).effect( "slide", hideoptions, 1000, callback )
  </code></pre>
  
  <p>to slide out the "viewPort" div, and in the callback() function I am sliding in the new div into the display by calling</p>
  
  <pre><code>$( "#viewPort2" ).effect( "slide", showoptions, 1000 )
  
  var hideoptions = {  "direction" : "left",  "mode" : "hide";
  
  var showoptions = {"direction" : "right","mode" : "show"};
  </code></pre>
  
  <p>The problem is that it is not seamless transition: first the content slides out leaving behind a blank area then the new content slides in.</p>
  
  <p>Is there a way to avoid the blank display?</p>