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接收到的数据放在“content”div中，我想用animate（）调整div高度。这里的步骤：

获取旧的“内容”高度
使用ajax接收数据更新“content”div
采取新的高度
使用高度差进行动画处理。

所以我写道：

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

你确定你的内容块是浮动的：左; ？也许#content的高度确实没有改变...如果你有多个块浮动：左;在一个父块中使用float：none; ，父块没有“真正的高度”，显示了子块，因为溢出是可见的......

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

Answer 2

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

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

jQuery ajax无法动画div高度调整成功函数

2 个答案: