How to use the jQuery UI slide effect to easily output one div and move it to another div?

Question

I use

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

to pull out the div “viewPort”, and in the callback () function I’m gliding in the new div on the display, 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 a smooth transition: first, the content slides, leaving an empty space, and then new content is added.

Is there a way to avoid a blank display?

Answer 1

This is because you invoke the effect on # viewPort2 in the callback on the #viewPort effect. This means that this will happen only after the effect on #viewPort is fully completed. Try calling the effect on # viewPort2 right after on #viewPort, for example:

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