javascript - jQuery ajax 无法在成功函数中设置 div 高度调整大小的动画

Question

我有一个菜单，其中每个项目都有一个通过 ajax 更新的内容（放在“内容”div 中）。

    <ul id="menu">
        <li class="gr" on><a href="#">Home</a></li>
        <li class="yel"><a href="#">Products</a></li>
        <li class="bl"><a href="#">Contact</a></li>
    </ul>
    <div class="container">
        <div id="content">
        </div>
    </div>

在$.ajax success()函数中，我将 ajax 接收到的数据放在“内容”div 中，我想用 animate() 调整 div 高度。这里的步骤：

1. 获取旧的“内容”高度
2. 用 ajax 接收到的数据更新“内容”div
3. 迈上新高度
4. 使用高度差制作动画。

所以我写道：

success : function (data) {
  var contHeight = $("#content").height(); //older "content" height
  $('#content').html(data); //update "content"
  var diffHeight = $("#content").height() - contHeight; //difference from new and old height
  $('#content').animate({height: '+=' + diffHeight + 'px'},500);
}

我尝试了我的代码（使用一些alert()函数进行调试），我注意到：如果我使用animate()，contHeight它等于数据更新后的“内容”高度（所以旧高度等于新高度）并且没有动画。另一方面，如果我删除animate()旧的和新的高度是不同的。似乎animate()不允许更新“内容”高度。

Answer 1

Are you sure your content block is float:left; ? Maybe height of #content doesnt change really ... if you have multiple block with float:left; in a parent block with float:none; , parent block havent "the real height", child blocks were showed because overflow is visible ...

<div class="container">
    <div id="content" style="float:left">
        &nbsp;
    </div>
</div>

Answer 2

尝试将您的动画功能切换为：

$('#content').animate({height: $('#content').height() + diffHeight + 'px'},500);