Animate Jquery detach / appendTo

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>