如何使用JQuery UI幻灯片效果无缝滑出一个div并在另一个div中滑动？

Question

我正在使用

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

滑出“viewPort”div，并在callback（）函数中我通过调用

将新div滑入显示

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

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

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

问题在于它不是无缝过渡：首先将内容滑出，留下空白区域，然后新内容滑入。

有没有办法避免空白显示？

Answer 1

这是因为你在#viewPort效果的回调中调用＃viewPort2的效果。这意味着只有在#viewPort的效果完全结束后才会出现。尝试在＃viewPort上的＃viewPort2之后调用＃viewPort2上的效果，例如：

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