Question

我有这个例子

$(document).ready(function() {
  $("#btn").click(function() {
    removeSecondContainer();
  });
});

function removeSecondContainer() {
  var container = $("#c2");
  container.slideToggle(500, function() {
    container.remove();
  });
}

.container {
  margin: 20px auto;
  height: 20px;
  width: 100px;
  background: red;
}

<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" id="c1">
</div>

<div class="container" id="c2">
</div>

<div class="container" id="c3">
</div>

正如您所看到的，这个过程根本不顺利。当第二个容器被移除时，第二个容器的边缘也会被移除。这会导致从顶部拉动。

我怎样才能顺利完成这项工作？我想在拆卸容器时将时间间隔降低到0。

Answer 1

您正面临保证金崩溃问题。正如您可能已经注意到，每个容器之间没有像预期的那样40px但只有20px。

您可以阅读here：

在CSS中，两个或多个框的相邻边距（可能或可能不是兄弟姐妹）可以组合形成单一的边缘。边距结合这种方式据说会崩溃，并由此产生组合保证金称为折现保证金。

因此，在删除元素时，您会减少顶部和底部的边距，以留下第一个和最后一个元素。当元素的高度达到0并被移除时，您会在剩余的块之间创建另一个边距，从而从40px跳到20px的边距。

避免这种情况的想法是增加高度并使用linear-gradient仅为您想要的部分着色（并使以前用于边距的部分保持透明）。就像那样，过渡将顺利进行，因为没有更多的保证金问题。

$(document).ready(function() {
  $("#btn").click(function() {
    removeSecondContainer();
  });
});

function removeSecondContainer() {
  var container = $("#c2");
  container.slideToggle(500, function() {
    container.remove();
  });
}

.container {
  margin: auto;
  height: 60px;
  width: 100px;
  background: linear-gradient(to bottom, transparent 33.33%, red 33.33%, red 66.67%, transparent 66.67%);/
  box-sizing: border-box;
}

<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" id="c1">
</div>

<div class="container" id="c2">
</div>

<div class="container" id="c3">
</div>

或者通过添加另一个容器来使用flex，因为没有与flexbox（Margin collapsing in flexbox）的边距匹配：

$(document).ready(function() {
  $("#btn").click(function() {
    removeSecondContainer();
  });
});

function removeSecondContainer() {
  var container = $("#c2");
  container.slideToggle(500, function() {
    container.remove();
  });
}

.box {
  display: flex;
  flex-direction: column;
}

.container {
  margin: 20px auto;
  height: 20px;
  width: 100px;
  background: red;
  box-sizing: border-box;
}

<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="box">
  <div class="container" id="c1">
  </div>

  <div class="container" id="c2">
  </div>

  <div class="container" id="c3">
  </div>
</div>

Answer 2

由于清算。底部边缘不适合他们。使用float或将margin-bottom或margin-top移至0

这里是示例

编辑：使用删除div更新 https://jsfiddle.net/f5zw18er/3/

Answer 3

您可以使用回调函数来使用jQuery动画。它略有不同，因为它不包括幻灯片切换，但在您的示例中它只被删除，所以这可以工作。

这里我们删除边距并使用动画隐藏元素，然后最终删除回调中的元素。

$(document).ready(function() {
  $("#btn").click(function() {
    removeSecondContainer();
  });
});

function removeSecondContainer() {
  var container = $("#c2");
  container.animate({ 'margin' : '-20px auto', 'opacity': 0 }, 500, function(){
    container.remove();
  });
}

.container {
  margin: 20px auto;
  height: 20px;
  width: 100px;
  background: red;
}

<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" id="c1">
</div>

<div class="container" id="c2">
</div>

<div class="container" id="c3">
</div>

在Jquery中使用slideToggle时，请按时间降低边距

3 个答案: