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();
    });
});

Example fiddle

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

Example fiddle

Answer 2

将position: relative添加到元素。 top属性适用于定位元素，其位置不是static。 position: relative适合这种情况。

＆＃13;

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

＆＃13;

.container {
  border: 2px solid blue;
  display: inline-block
}
.block {
  width: 100px;
  height: 100px;
  background: red;
  margin: 5px;
  position: relative
}
.move {
  display: block
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="block"></div>
  <div class="block"></div>
</div>
<button class="move">Click</button>

＆＃13;

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

2 个答案: