アニメーションを使用してdivを移動する方法

Question

現在、divをある場所から別の場所に移動していますが、いくつかのアニメーションでそれをやりたいのです。スライドさせて、もう一方のdivsを押し下げてください。これをどうやってやりますか？

これまで私がこれまで持っていたことは次のとおりです。

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

 
$('.button').click(function() { 
 
\t $('.row').addClass('row-changed'); 
 
\t $('.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

に役立つかもしれない。この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>