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 filed in jquery for this: http://bugs.jquery.com/ticket/8515
jQuery add
overflow: hiddenduring 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.