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