如何将div移到顶部并删除？

Question

我有两个内部容器块,下面有按钮.我需要,当我点击按钮时,第一个div慢慢向上移动并移除.我试过了:

HTML:

<div class="container">
    <div class="block"></div>
    <div class="block"></div>
</div>
<button class="move">Click</button>

CSS:

.container {
    border: 2px solid blue;
    display: inline-block
}

.block {
    width: 100px;
    height: 100px;
    background: red;
    margin: 5px;
}

.move {
    display: block
}

jQuery的:

$(document).ready(function() {
    $('.move').click(function() {
        $('.block:first-child').animate({scrollTop: '-100px'}, 1000, function() {
            $(this).remove();
        });
    });
});

但是当我点击按钮时,先.block删除.我需要先把它搬起来.怎么解决？

的jsfiddle

Answer 1

你正在scrollTop为不具备你想要的效果的元素制作动画.您可以为其设置动画height.但是,还有一个slideUp()功能可以为您完成此操作.试试这个:

$('.move').click(function() {
    $('.block:first-child').slideUp(function() {
        $(this).remove();
    });
});

示例小提琴

如果必须在不调整块大小的情况下执行此操作,则可以overflow: hidden在容器上进行设置,然后margin-top为块本身设置动画.

示例小提琴