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。

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

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

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

一切正常，唯一的问题是div的滑出和滑入不在同一级别。我可以看到div2位于div1的滑出下面，然后取div1的位置。

我哪里错了？

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

jQuery UI幻灯片divs无缝

1 个答案: