Question

我想在将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>

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

动画Jquery分离/ appendTo

1 个答案: