代码之家 › 专栏 › 技术社区 › Kerby82

jQuery UI滑动div无缝

jquery-ui jquery

Kerby82 · 技术社区 · 8 年前

我有以下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的位置。

我哪里错了?

1 回复 | 直到 8 年前

War10ck 8 年前

要使动画以同步方式发生,可以使用的回调函数参数 .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>

推荐文章

chris loughnane · 使用jQuery UI滑块移动和缩放svg元素时遇到问题?

7 年前

Tirkesh Turkesh · 如何在可拖放div中释放项目的精确位置元素上拖放

7 年前

ferralucho · Hightlight jquery datepicker标头选定的星期几

7 年前

Paili · 如何在jQuery自动完成中添加其他内容?

7 年前

monu · 动态嵌套选项卡创建

7 年前

Tirkesh Turkesh · 可拖动行在jquery中不工作?

7 年前

Joe · WordPress-如何按字母顺序排列jQuery自动完成搜索建议结果,优先排序第一个字符,然后再排序第二个字符等。?

7 年前

Triwahyu Pamungkas Pribadi · 如何在可拖动停止时获取目标/类名

7 年前

pcCC28 · 如何基于jwt令牌身份验证保持用户登录。

7 年前

buggy1985 · 具有多个元素的jQuery UI Sortable抛出“TypeError:无法读取null的属性‘insertBefore’”

7 年前