jQuery animate移除元素

Question

TL:DR

jQuery不设置高度减少的动画，而是简单地删除其中一个元素，同时适当地设置其他元素的动画。请看小提琴：https://jsfiddle.net/qyac3v1z/5/

完整版本

我有一个水平形状的div，它有一个垂直形状的嵌入div。在垂直div中，我有另外两个div作为边界。我想设置它的高度降低动画，使其看起来像一个下拉菜单。我有一个简单的jQuery函数来实现这一点。

function maximizeCleaningCard () {
$('.cleaning_card_right_right_border, .cleaning_card_right_left_border').animate({height: 0}, 1000)
$('.cleaning_card_right').animate({height: 80}, 1000)

}

然而，它并没有为.cleaning_card_right_right_border设置动画，而是简单地删除了它。如果我要删除第二行$('.cleaning_card_right').animate({height: 80}, 1000)，它会非常好地工作。我可能有什么问题？请参阅小提琴的代码。

Answer 1

这基本上是一个CSS问题，因为jQuery在制作动画时添加了overflow: hidden。因此，您必须将父容器的overflow设置为visible：

.cleaning_card_right {
display: inline-block;
position: absolute;
height: 500px;
background-color: white;
width: 25%;
margin-left: 75%;
border-bottom: 1px solid black;
overflow: visible !important;
}

或者，您可以确保子元素完全位于父容器中。