尽管可见，jQuery 的宽度动画隐藏了溢出

Question

我增加width的div使用jQuery的.animate()。

该div包含绝对定位，其边界穿越父母的边界的子元素。

当动画开始时，子div元素在父元素之外的部分变得不可见，当动画完成时，它再次可见。

<div id=parent>
    <div id=child>
    </div>
</div>

#parent{
    width: 200px;
    height: 200px;
    background: blue;
    position: relative;
    overflow: visible;
}
#child{
    width:100px;
    height: 10px;
    background: red;
    position: absolute;
    right: -50px;
    top: 100px;
}

$("#parent").animate({width: '300'}, 2000);

现场演示

Answer 1

jQuery animate 会在元素动画时自动强制overflow:hidden;它。

您可以使用 !important CSS 样式解决此问题：

#parent{
    width: 200px;
    height: 200px;
    background: blue;
    position: relative;
    overflow: visible !important;
}

编辑 由于 CSS 优先级，内联样式可能会覆盖!important样式。如果是这样，请尝试这样的事情

$("#parent").animate({width: '300'}, 2000).css('overflow', 'visible', 'important');