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

Question

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

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);

LIVE DEMO

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');