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，在一个特定的事件中，我想滑出div1，然后无缝地在div2中滑动。

在javascript代码下面，我隐藏div2并执行幻灯片操作：

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

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

所有的东西都在工作，唯一的问题是div的滑出和滑入并不是在同一水平上。我可以看到div2从div1的滑块下面进来，然后取div1的位置。

我哪里错了？

Answer 1

要使动画以同步的方式进行，可以使用.hide()的回调函数参数来初始化第二个动画，如下所示：

​

$("#div1").hide("slide", { direction: "left" }, 4000, function () {
	$("#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>

​