jQuery: div pops back to full size after animation

问题

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');
});

回答1:

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');
});

回答2:

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);
});

回答3:

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?

回答4:

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

来源：https://stackoverflow.com/questions/920718/jquery-div-pops-back-to-full-size-after-animation