Jquery：更改html时平滑调整大小

Question

我的页面布局是3个水平DIVS。中间DIV将内容加载到其中。我希望DIV做一个平滑的高度调整到适当的大小（比如使用animate），然后淡入内容。

这就是我现在所拥有的

<div id='a'></div>
<div id='b'>foo</div>
<div id='c'></div>

$( '#a ').fadeOut().innerHtml('bar').hide().fadeIn()

这让我接近我想要的东西，但看起来非常粗糙

我正在使用jQuery 1.7.2并且还可以访问jQueryUI

精化

目前，中间DIV将淡出，然后（因为没有内容）将消失。添加新内容后，它会立即调整大小并淡入新内容。

我想要发生的是内容淡出并保持高度。添加新内容后，我希望div调整到适当的高度，然后淡出内容

Answer 1

将其更改为以下内容。请注意，您在JQuery对象上使用了innerHtml，正确的语法是html。此外，在设置内容后，您已经不必要地调用了hide，但由于您已调用fadeOut，因此该项目已被隐藏。

试试这个：

$( '#a ').fadeOut().html('bar').fadeIn()

DEMO：http://jsfiddle.net/SmZgw/1/