jQuery: div pops back to full size after animation

Question

In the jQuery example below, I have one div inside another. When I animate the inner div down to a width of 0, the outer div (which has absolute positioning), decreases in width along with it.

This is desired.

The trouble is that after the animation is complete, the outer div pops back to its original size. Is this expected? How can I keep this from happening?

Thanks!

Example

html:

<div class="outer"><div class="inner">innerContent</div></div>

---

css:

div.outer {
    position: absolute;
    padding: 10px;
    background: purple;
}

div.inner {
    position: relative;
    padding-left: 5px;
    padding-right: 5px;
    background: orange;
    clip: auto; overflow: hidden;
}

---

javascript:

$('.outer').click(function() { 
 $('.inner').animate({width: 0, paddingLeft: 0, paddingRight: 0}, 'slow');
});

Answer 1

Have you tried setting the outerbox width to 0 after the animation is complete?

$('.inner').animate({width: 0, paddingLeft: 0, paddingRight: 0}, 'slow', function() {
  $('.outer').css("width", 0);
});

Answer 2

For me in Firefox 3.0.10 using jQuery 1.3.2 in Ubuntu 9.04 this works perfectly. May be it's some kind of interaction with other html elements in your page?

Answer 3

In my tests, this works fine in IE, FF and Opera, but produces the bug you mention in Chrome and Safari.

Answer 4

Looks like if I grab the width of the 'outer' div, and the outerWidth of the 'inner' div, then subtract the 'outer' div's width from the 'inner' div's outerWidth, and animate the 'outer' width to the result simultaneously while animating the 'inner' to 0, it works.

Any opinions on whether this should be a bug fix request for jquery or webkit or both.

$('.outer').click(function() { 
 var innerWidth = $('.inner').outerWidth();
 var outerWidth = $('.outer').width();
 var theWidth = outerWidth - innerWidth;
 $('.inner').animate({width: 0, paddingLeft: 0, paddingRight: 0}, 'slow' );
 $('.outer').animate({width: theWidth}, 'slow');
});