Jquery动画隐藏所包含的div上的边框

Question

我花了一段时间来追踪为什么我的边框消失了，我发现这是jquery的一个bug/特性。这是基本的简化案例，显示了我的问题。我有两个嵌套的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>

当你点击"Go“时，一半的蓝色边框会在动画过程中隐藏起来。这是jquery的一个特性吗？或者是虫子？有没有一种方法可以在不将边框样式移动到外部div的情况下使其工作？

- UPDATE - FWIW jquery中有一个bug：http://bugs.jquery.com/ticket/8515

Answer 1

jQuery在动画过程中添加overflow: hidden以确保考虑到宽度。

内部元素的边框溢出了外部元素，所以溢出会导致它被裁剪。

最简单的解决方案是在动画之后添加.css('overflow', 'visible')。