Jquery animate 隐藏了包含的 div 的边框答案

【问题标题】：Jquery animate hides borders on contained divsJquery animate 隐藏了包含的 div 的边框
【发布时间】：2011-03-15 01:43:26
【问题描述】：

我花了一段时间才找到我的边框消失的原因，我发现这是 jquery 的一个错误/功能。这是显示我的问题的基本简化案例。我有两个嵌套的 div。我正在为外部 div 的大小设置动画，而内部 div 的边框在动画期间被隐藏。

<html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<style>
    #a {
        position: absolute;
        top:50px;
        left: 100px;
        width: 88px;
        height: 144px;
    }
    #b {
        width: 100%;
        height: 100%;
        background: yellow;
        border: 5px solid blue;
    }
</style>
<h1>go</h1>

<div id="a">
    <div id="b"></div>
</div>

<script>
    $(function() {
        $("h1").click(function() {
            $("#a").animate({width:300},2000);
        });
    });
</script>
</html>

当您单击“开始”时，一半的蓝色边框在动画期间被隐藏。这是jquery的一个特性吗？还是一个错误？有没有办法在不将边框样式移动到外部 div 上的情况下完成这项工作？

---- 更新 ---- FWIW 在 jquery 中为此提交了一个错误：http://bugs.jquery.com/ticket/8515

【问题讨论】：

标签： jquery css

【解决方案1】：

jQuery 在动画期间添加 overflow: hidden 以确保遵守宽度。

您的内部元素的边框溢出了外部元素，因此溢出会导致它被剪裁。
最简单的解决方法是在动画后面加上.css('overflow', 'visible')。

【讨论】：

我不明白为什么 jQuery 需要更改溢出，但感谢您的解决方法！
@Leo：可能是为了防止人们抱怨动画内容溢出而什么也没做。