平滑的jQuery调整大小和淡入淡出

Question

我正在尝试平稳地重新加载div的内容（高度可能会变化）。 我看过fadeIn（），animate（）等，却找不到任何能产生平滑效果的东西。

我从中得到最好结果的代码是：

jQuery(document).ready(function() {
 jQuery('#click').live("click", function() {
  jQuery('#test').animate({'opacity': 0}, 500, function () {
   jQuery(this).html('new text');
  }).animate({'opacity': 1}, 600);
 });
});


<div id="test" style="width:400px;">
My old text is many lines long and contains some pointless info however when you click below we will get rid of it all <span id="click">Link</span>.
</div>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
More content...

我不满意的部分效果是，当html内容更改时，内容会跳到div以下，是否会在不知道新内容高度的情况下随着淡出而发生调整大小？ （或者我是否需要将其加载到占位符div中以计算新高度）

Answer 1

这样尝试

<input id="btn" type="button" value="click" />
<div id="child"> 
asda
    <br/>
asd
     <br/>
asd
     <br/>
asd
     <br/>
asd
</div>

脚本

$("#btn").click(function(){
 $("#child").slideToggle();
});

演示

Answer 2

不久前，我遇到了同样的问题……在我的解决方案中，我决定使用其新内容来获取div（“测试”）的高度，并将该高度设置为该值的动画。 结果，div会随着新的内容的淡入而改变高度，而随后的内容则会跟随动画上下移动。

祝好运