如何使用动画接连移动div

Question

I'm currently moving a div from one location to another, but I want to do it with some animations. Just have it slide to place and push the other divs down. How would I go about doing this?

Here is what I have so far.

 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

try this one

 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>