Javascript 如何使用JQuery UI幻灯片效果无缝地滑出一个div并滑入另一个div？

我正在使用

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

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

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

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

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

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

---

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

这是因为你调用了回调中的{ VIEWTURP2的效果，以影响X视口的效果。这意味着只有在#viewPort上的效果完全完成后才会发生。尝试在#视口上的效果之后调用#视口2上的效果，例如：

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

---

把1000换成更小的，比如10。