使用jQuery slideToggle时如何平滑降低边距优化容器移除效果？

嘿，我完全懂你说的这个突兀感！问题出在你把容器的margin直接绑定在了.container元素上——当你移除#c2的时候，它的上下margin也跟着一起消失了，#c1和#c3之间的间距瞬间从40px（20+20）变成0，自然会出现突然上跳的情况。

这里有两种简单的解决方案，都能实现完全平滑的移除效果：

方法一：用外层包裹器（Wrapper）管理间距 #

这种方法更优雅，把容器的margin转移到一个外层包裹器上，这样我们可以动画整个包裹器的高度（包含容器和间距），避免单独处理margin的问题。

修改后的HTML #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<button id="btn">Remove the second container</button> 
<div class="container-wrapper">
  <div class="container" id="c1"></div>
</div>
<div class="container-wrapper">
  <div class="container" id="c2"></div>
</div>
<div class="container-wrapper">
  <div class="container" id="c3"></div>
</div>

调整后的CSS #

.container-wrapper {
  margin: 20px auto; /* 把原来容器的margin移到包裹器上 */
}
.container { 
  height: 20px; 
  width: 100px; 
  background: red; 
  /* 移除容器自身的margin */
}

更新后的JavaScript #

$(document).ready(function() { 
  $("#btn").click(function() { 
    removeSecondContainer(); 
  }); 
}); 
function removeSecondContainer() { 
  // 找到目标容器的外层包裹器
  var wrapper = $("#c2").closest(".container-wrapper");
  // 动画包裹器的高度和margin到0，实现平滑收缩
  wrapper.animate({
    height: 0,
    marginTop: 0,
    marginBottom: 0
  }, 500, function() {
    // 动画结束后移除整个包裹器
    wrapper.remove();
  });
}

方法二：直接动画容器的高度和margin #

如果你不想额外加包裹器，也可以直接动画容器的高度和上下margin，让它们一起平滑降到0，再移除容器。

修改后的JavaScript #

$(document).ready(function() { 
  $("#btn").click(function() { 
    removeSecondContainer(); 
  }); 
}); 
function removeSecondContainer() { 
  var container = $("#c2"); 
  // 动画容器高度到0，同时把上下margin也降到0
  container.animate({
    height: 0,
    marginTop: 0,
    marginBottom: 0
  }, 500, function() {
    container.remove();
  });
}

为什么这个方法有效？ #

原来的slideToggle只会动画元素的高度，不会处理margin属性。当容器被移除时，它的margin突然消失就会导致布局跳动。而我们手动把margin和高度一起动画到0，容器会慢慢“收缩”并消除自身的间距，最后移除时就不会有突兀的变化了。

内容的提问来源于stack exchange，提问作者peterHasemann