javascript - 隐藏后如何平滑地重新排列 div 框？

Question

所以我有一个包含一些内容的框列表。我添加了一个滑动功能来隐藏所需的框。问题是，当那个盒子隐藏起来时，下面的那个盒子上升得非常快，而且看起来一点也不平滑。我想模仿的是像 Google Now Cards 一样，当一个盒子因为滑动而隐藏时，重新排列盒子的平滑效果。我做了一个片段命令来试图更好地解释我的意思。

单击方框 2 会隐藏该方框，然后方框 3 会上升以替换方框 2 的位置，但它很快就会到达那里。我该怎么做才能使重新排列变慢？我很感激你给的任何建议

$('.container').on('click', '#b2', function() {
  $(this).fadeOut(600);
});

.container {
  width: 100%;
  height: 400px;
}

.box {
  height: 30px;
  width: 400px;
  background-color: yellow;
}

h3 {
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="container">
  <div class="box" id="b1">
    <h3>This is box 1</h3>
  </div>
  <div class="box" id="b2">
    <h3>This is box 2</h3>
  </div>
  <div class="box" id="b3">
    <h3>This is box 3</h3>
  </div>
</div>

Answer 1

你可以使用toggle()代替fadeOut

$('.container').on('click', '#b2', function() {
  $(this).toggle("slow", function() {
    // Animation complete.

  });
});

fiddle example