我目前正在将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>
答案 0 :(得分:0)
尝试这个
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>