Jimenemex Jimenemex - 4 months ago 11
CSS Question

How to move a div after another using animations

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>




JAG JAG
Answer

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>