隐藏内容时，使div跳起来更流畅

Question

我创建了代码，该代码将删除div并对其内部的内容进行动画处理，以使其看起来像其滑出。一切正常，但是下面的div似乎跳起来了，我想对此进行平滑处理。 这是我的代码：

$(document).on('click', 'div', function() {
  const span = $(this).find('span');
  const div = $(this);
  span.css({
    'right': '100%'
  });
  window.setTimeout(function() {
    div.hide();
  }, 250);
})

div {
  width: 100%;
  height: 5em;
  text-align: center;
  vertical-align: middle;
  padding: 20px;
  background-color: #e6e6e6;
  margin-bottom: 10px;
}

div>span {
  right: 50%;
  display: block;
  position: absolute;
  transition: all 0.25s ease-out;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div>
  <span>
    one
  </span>
</div>
<div>
  <span>
    two
  </span>
</div>
<div>
  <span>
    three
  </span>
</div>
<div>
  <span>
    four
  </span>
</div>

Answer 1

使用jQuery的slideUp方法和持续时间参数

$(document).on('click', 'div', function() {
  const span = $(this).find('span');
  const div = $(this);
  span.css({
    'right': '100%'
  });
  window.setTimeout(function() {
    div.animate({height: 0, padding: 0}, 250);
  }, 250);
})

div {
  width: 100%;
  height: 5em;
  text-align: center;
  vertical-align: middle;
  padding: 20px;
  background-color: #e6e6e6;
  margin-bottom: 10px;
}

div>span {
  right: 50%;
  display: block;
  position: absolute;
  transition: all 0.25s ease-out;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div>
  <span>
    one
  </span>
</div>
<div>
  <span>
    two
  </span>
</div>
<div>
  <span>
    three
  </span>
</div>
<div>
  <span>
    four
  </span>
</div>

使用slideUp为边距设置动画会带来一点点烦人，这会使得在动画时框之间的间隙变小。为避免这种情况，请仅设置高度和填充物的动画。

$(document).on('click', 'div', function() {
  const span = $(this).find('span');
  const div = $(this);
  span.css({
    'right': '100%'
  });
  window.setTimeout(function() {
    div.animate({height: 0, padding: 0}, 250)
    .animate({margin: 0}, 50);
  }, 250);
})

div {
  width: 100%;
  height: 5em;
  text-align: center;
  vertical-align: middle;
  padding: 20px;
  background-color: #e6e6e6;
  margin-bottom: 10px;
}

div>span {
  right: 50%;
  display: block;
  position: absolute;
  transition: all 0.25s ease-out;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div>
  <span>
    one
  </span>
</div>
<div>
  <span>
    two
  </span>
</div>
<div>
  <span>
    three
  </span>
</div>
<div>
  <span>
    four
  </span>
</div>

Answer 2

您只需添加值即可隐藏功能。它还可以提供平稳的过渡。

$(document).on('click', 'div', function() {
  const span = $(this).find('span');
  const div = $(this);
  span.css({
    'right': '100%','height':'0px','transition':'5s'
  });
  window.setTimeout(function() {
    div.hide(500);
  }, 250);
})

div {
  width: 100%;
  height: 5em;
  text-align: center;
  vertical-align: middle;
  padding: 20px;
  background-color: #e6e6e6;
  margin-bottom: 10px;
}

div>span {
  right: 50%;
  display: block;
  position: absolute;
  transition: all .25s ease-out;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div>
  <span>
    one
  </span>
</div>
<div>
  <span>
    two
  </span>
</div>
<div>
  <span>
    three
  </span>
</div>
<div>
  <span>
    four
  </span>
</div>