如何使用动画移动div到另一个

Question

我目前正在将div从一个位置移动到另一个位置，但我想用一些动画来做。只需将其滑动放置并将另一个divs向下推。我该怎么做呢？

这是我到目前为止所拥有的。

var row = $('<div class="row">Another row inserted</div>');
$('.container').append(row);

$('.button').click(function() {
	$('.row').addClass('row-changed');
	$('.container > div:nth-child(2)').after(row);
});

.row {
  color: blue;
}
.row-changed {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
  <button class='button'>Move</button>
  <div class='row'>Row here</div>
  <div class='row'>Row here</div>
  <div class='row'>Row here</div>
  <div class='row'>Row here</div>
  <div class='row'>Row here</div>
</div>

Answer 1

尝试这个

var row = $('<div class="row">Another row inserted</div>');
$('.container').append(row.hide().slideDown());

$('.button').click(function() {
    $('.row').addClass('row-changed');

    var clone = row.clone().css("position", "absolute");
    $('.container').append(clone);
    row.css("visibility", "hidden");

    var sel = $('.container > div:nth-child(2)');
    sel.after(row.hide().slideDown());
    var position = sel.next().position();

    clone.animate({
        left: position.left,
        top: position.top
    }, 400, function() { 
        clone.remove(); 
        row.css("visibility", "visible"); 
    });
});

.row {
  color: blue;
}
.row-changed {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
  <button class='button'>Move</button>
  <div class='row'>Row here</div>
  <div class='row'>Row here</div>
  <div class='row'>Row here</div>
  <div class='row'>Row here</div>
  <div class='row'>Row here</div>
</div>