Question

我花了一段时间来追踪我的边界消失的原因，我发现它是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的一个特性吗？还是一个bug？有没有办法让这项工作没有将边框样式移动到外部div？

----更新---- FWIW在jquery中存在一个错误：http://bugs.jquery.com/ticket/8515

Answer 1

jQuery在动画期间添加overflow: hidden以确保宽度得到尊重。

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

Jquery动画隐藏了包含div的边框

1 个答案: