Jquery animate hides borders on contained divs
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.
加载中,请稍侯......
精彩评论