Jquery animate hides borders on contained divs_问答_开发者

Jquery animate hides borders on contained divs

开发者 https://www.devze.com 2023-02-16 08:53 出处：网络

It took me a while to track down why my borders were disappearing, and I figured out it\'s a bug/feature of jquery.Here\'s the base simplified case showing my problem.I have two nested divs.I\'m anima

相关专题：css jquery

It took me a while to track down why my borders were disappearing, and I figured out it's a bug/feature of jquery. Here's the base simplified case showing my problem. I have two nested divs. I'm animating the size of the outer div, and the inner div's border gets hidden during the animation.

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

When you click "Go", half the blue border gets hidden during the animation. Is this a feature of jquery? Or a bug? Is there a way to make this work without moving the border style onto the outer div?

---- UPDATE ---- FWIW there's a bug fil开发者_运维技巧ed in jquery for this: http://bugs.jquery.com/ticket/8515

jQuery add overflow: hidden during the animation to make sure that width is respected.

Your inner element's border is overflowing the outer element, so the overflow causes it to be clipped.
The simplest solution is to add .css('overflow', 'visible') after the animation.