CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3325783
user3325783

Reputation:

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>

Upvotes: 0

Views: 769

Answers (1)

Ja9ad335h
Ja9ad335h

Reputation: 5075

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>

Upvotes: 2

Related Questions