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

时间:2011-09-14 19:30:05

标签: javascript jquery jquery-ui

我正在使用

$( "#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"};

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

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

1 个答案:

答案 0 :(得分:9)

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

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