jquery - CSS3 过渡问题

Question

我正在使用 jquery 删除一堆 div 元素。我想要的是当 div 被删除时，其余的 div 元素应该动画到顶部。我当前的代码只是删除它，其余的 div 元素立即移动。我怎样才能做到这一点？

下面是我的代码

HTML

<div class="div"><a href="#" class="remove">Remove</a></div>
<div class="div"><a href="#" class="remove">Remove</a></div>
<div class="div"><a href="#" class="remove">Remove</a></div>
<div class="div"><a href="#" class="remove">Remove</a></div>

JS

$('.remove').on('click', function () {
    $(this).parent().remove();
});

CSS

.div {
    padding: 20px;
    margin-bottom: 20px;
    background: #ccc;
     -webkit-transition: all 2s; /* For Safari 3.1 to 6.0 */
    transition: all 2s;
}

JSFIDDLE

Answer 1

这样就可以了

$('.remove').on('click', function () {
  $(this).parent().slideUp("slow", function(){
    $(this).remove();
  });
});