How to use JQuery UI slide effect to seamlessly slide out one div and slide in another div?

Question

I am using

$( "#viewPort" ).effect( "slide", hideoptions, 1000, callback )

to slide out the "viewPort" div, and in the callback() function I am sliding in the new div into the display by calling

$( "#viewPort2" ).effect( "slide", showoptions, 1000 )

var hideoptions = {  "direction" : "left",  "mode" : "hide";

var showoptions = {"direction" : "right","mode" : "show"};

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.

Is there a way to avoid the blank display?

Answer 1

It's because you're calling the effect on #viewPort2 in the callback to the effect of #viewPort. That means it will occur only once the effect on #viewPort has fully finished. Try calling the effect on #viewPort2 right after the one on #viewPort, for example:

$( "#viewPort" ).effect( "slide", hideoptions, 1000); //notice, no callback
$( "#viewPort2" ).effect( "slide", showoptions, 1000);