jQuery：动画后 div 弹回完整尺寸

在下面的 jQuery 示例中，我将一个 div 放在另一个 div 中。当我将内部 div 的宽度设置为 0 时，外部 div（具有绝对定位）的宽度也会随之减小。

这是所希望的。

问题是，动画完成后，外部 div 会弹回到原来的大小。这是预期的吗？我怎样才能避免这种情况发生？

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

看起来如果我获取“外部”div 的宽度和“内部”div 的outerWidth，然后从“内部”div 的outerWidth 中减去“外部”div 的宽度，然后将“外部”宽度设置为动画同时将“内部”动画设置为 0，它就可以工作。

关于这是否应该是 jquery 或 webkit 或两者的错误修复请求的任何意见。

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