隐藏后平滑重新排列div框，如何？答案

【问题标题】：Smooth rearrangement of div boxes after one hides, how?隐藏后平滑重新排列div框，如何？
【发布时间】：2016-07-08 09:02:37
【问题描述】：

所以我有一个包含一些内容的框列表。我添加了一个滑动功能来隐藏所需的框。问题是，当那个盒子隐藏起来时，下面的盒子会很快升起来，而且看起来一点也不平滑。我想模仿的是当一个盒子因为滑动而隐藏时重新排列盒子的平滑效果，就像谷歌即时卡一样。我已经做了一个 sn-p 命令来试图更好地解释我的意思。

单击框 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>

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

您可以使用toggle() 代替fadeOut

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

  });
});

小提琴example

【讨论】：

@SebastianAmpueroMorisaki 编码愉快！

【解决方案2】：

你可以使用slideUp()代替fadeOut()

$('.container').on('click', '#b2', function() {
  $(this).slideUp("slow", "linear", function() {

  });
});

【讨论】：

【解决方案3】：

我找到了一个我认为完全符合您要求的答案：

How to animate divs when they move to fill empty space left by other divs that fade out

我认为jquery代码应该是这样的：

$('.container').on('click', '#b2', function() {
    $(this).animate({
        'height': 0,
        'opacity': 0
    }, 750, function() {
        $(this).remove();
    });
});

【讨论】：

【解决方案4】：

这个怎么样...

$('.container').on('click', '#b2', function() {
  $(this).fadeTo( 600, 0 );
  $(this).animate( {height: "0px"}, 600, function(){
    $(this).hide();
  });
});

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

.box {
  width: 400px;
  height: 50px; /*Adjusted height*/
  background-color: yellow;  
}

h3 {
  text-align: center;
  margin:auto 0;
}

<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>

【讨论】：