javascript - 如何使用JQuery UI滑动效果无缝滑出一个div并滑入另一个div？

Question

我正在使用

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

滑出“viewPort”div，并在回调()函数中通过调用将新的 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);