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

我有这个例子

$（文档）.ready（函数（）{
$（“#btn”）。单击（函数（）{
removeSecondContainer（）；
});
});
函数removeSecondContainer（）{
变量容器=$（“#c2”）；
container.slideToggle（500，函数（）{
容器。移除（）；
});
}

.container{
保证金：20px自动；
高度：20px；
宽度：100px；
背景：红色；
}

卸下第二个容器

您正面临一个利润崩溃的问题。正如您可能注意到的，每个容器之间没有预期的40px，但只有20px

正如你所看到的：

在CSS中，两个或多个框（可能是或 可能不是同级）可以合并形成单个页边距。边距 这种结合方式被称为崩溃，由此产生的结合 边距称为折叠边距

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

---

避免这种情况的方法是增加高度，并使用

线性渐变

仅为所需的部分上色（并使先前用于边距的部分保持透明）。这样，过渡将顺利进行，因为没有更多的保证金问题

$（文档）.ready（函数（）{
$（“#btn”）。单击（函数（）{
removeSecondContainer（）；
});
});
函数removeSecondContainer（）{
变量容器=$（“#c2”）；
container.slideToggle（500，函数（）{
容器。移除（）；
});
}

.container{
保证金：自动；
高度：60px；
宽度：100px；
背景：线性梯度（至底部，透明33.33%，红色33.33%，红色66.67%，透明66.67%）/
框大小：边框框；
}

卸下第二个容器

您可以将jQuery animate与回调函数结合使用。它稍有不同，因为它不包括滑动切换，但在您的示例中，它只是被删除，所以这可以工作

在这里，我们将删除边距，并用动画隐藏元素，最后在回调中删除元素

$（文档）.ready（函数（）{
$（“#btn”）。单击（函数（）{
removeSecondContainer（）；
});
});
函数removeSecondContainer（）{
变量容器=$（“#c2”）；
动画（{'margin'：'-20px auto'，'opacity'：0}，500，function（）{
容器。移除（）；
});
}

.container{
保证金：20px自动；
高度：20px；
宽度：100px；
背景：红色；
}

卸下第二个容器

这是由于清算。底边利润与他们的关系不太好。使用浮动或将

页边距底部

或

页边距顶部

删除为0

下面是一个例子

编辑：使用删除div更新