动画 Jquery 分离/附加到

【问题标题】：Animate Jquery detach/appendTo动画 Jquery 分离/附加到
【发布时间】：2018-08-29 11:36:49
【问题描述】：

我想在将 DIV 从父级移动到另一个时添加动画，这会改变其位置，但立即没有动画。

$("#item").on("click", function() {
  $(this).detach().appendTo("#div2");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div2" style="height: 200px; width: 200px; display: block; background: red"></div>

<div>
  <div id="item" style="height: 50px; width: 50px; display: block; background: green"></div>

【问题讨论】：

标签： jquery html jquery-animate

【解决方案1】：

一种方法是在点击内使用slideUp 和slideDown。

$("#item").on("click", function() {
  var elm= $(this);
  elm.slideUp('normal', function() { //other option slow, fast
    elm.detach().appendTo('#div2');
    elm.slideDown('normal');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div2" style="height: 200px; width: 200px; display: block; background: red"></div>

<div>
  <div id="item" style="height: 50px; width: 50px; display: block; background: green"></div>

【讨论】：