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.

  });
});

小提琴example

Answer 2

您可以使用slideUp()

而不是fadeOut()

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

  });
});

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

Answer 4

这个怎么样......

＆＃13;

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

＆＃13;

.container {
  width: 100%;
  height: 400px;
}

.box {
  width: 400px;
  height: 50px; /*Adjusted height*/
  background-color: yellow;  
}

h3 {
  text-align: center;
  margin:auto 0;
}

＆＃13;

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

＆＃13;

一次隐藏后div盒的平滑重排，怎么样？

4 个答案: