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

这将做trik

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

Answer 2

以下是您的问题的解决方案：

http://jsfiddle.net/YwWn5/3/

更新了JS：

$('.remove').on('click', function () {
    var $elem = $(this).parent();
    $elem.addClass('removing');
    setTimeout(function () {
        $elem.remove();
    }, 500);
});

更新了CSS：

.div {
    padding: 20px;
    margin-bottom: 20px;
    background: #ccc;
    transition: width 2s, height 0.5s, opacity 0.5s, margin 0.5s, padding 0.5s;
}
.removing {
    height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
}

我包含了边距和填充动画，以防止元素移除时出现任何跳转。同样重要的是要注意我在实际删除元素之前使用setTimeout等待CSS动画完成。如果您不关心从DOM中删除的元素，并且可以在页面上保持不可见，则可以完全删除该部分。

Answer 3

您不需要CSS转换来尝试：

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

小提琴：http://jsfiddle.net/YwWn5/4/

CSS3过渡问题

3 个答案: