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

DEMO

Answer 2

我不久前遇到了同样的问题......在我的解决方案中，决定使用新内容获取div（“test”）的高度，并将高度设置为此值。结果，div在淡入新内容时改变高度，并且以下内容跟随动画上下。

祝你好运

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

2 个答案: