jQuery's宽度动画隐藏溢出，尽管它是可见的

jQuery's width animation is hiding the overflow despite being visible

本文关键字：溢出 隐藏 动画 jQuery      更新时间：2023-09-26

我正在使用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);

现场演示

设置动画时，jQuery animate会自动将元素强制为overflow:hidden;。

你可以用！重要的CSS样式：

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

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

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