如何使用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之后调用效果,例如:

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