jQuery UI的幻燈片div的無縫

Question

我有以下的html代碼：

<div class="col-md-12"> 
<div id="div1" class="col-md-12"> 
    content 
</div> 
<div id="div2" class="col-md-12"> 
    content 
</div> 
</div> 

我想隱藏DIV2並在特定事件中，我希望能夠無縫地滑出在DIV2的DIV1和幻燈片。

下面的JavaScript代碼，我隱藏DIV2，做滑動操作：

$("#div1").hide(); 

$("#div1").hide("slide", { direction: "left" }, 4000); 
$("#div2").show("slide", { direction: "right" }, 4000); 

一切工作的唯一問題是，在申報單的滑出和幻燈片不在同一水平上。我可以看到div2從div1滑出，然後取得div1的位置。

我在哪裏錯了？

Answer 1

爲了使動畫發生在一個同步的方式，你可以使用.hide()回調函數參數初始化第二動畫像這樣：

$("#div1").hide("slide", { direction: "left" }, 4000, function() { 
 
\t $("#div2").show("slide", { direction: "left" }, 4000); 
 
});

#div1,#div2 { 
 
    padding: 10px 20px; 
 
    width: 200px; 
 
    text-align: center; 
 
    border: 1px dotted #000; 
 
}

<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script> 
 
<div class="col-md-12"> 
 
<div id="div1" class="col-md-12"> 
 
    content 
 
</div> 
 
<div id="div2" class="col-md-12" style="display: none;"> 
 
    content 
 
</div> 
 
</div>