将内容加载到 div 中，并使用 jQuery 调整 div 的大小

Question

可能的重复：
jQuery 动画 - 平滑大小过渡

我有一个 div #infoMenu，其内容正在被替换使用以下代码：

function infoMenu(worldID) {
    $('#infoMenu').load('main.php?worldID='+worldID+'&menu #infoMenu').html('Loading...');              
}

我想知道是否可以为 div 的高度设置动画，而不是根据新内容的空间“跳”到不同的高度。

谢谢！

Answer 1

尝试添加回调函数：

function infoMenu(worldID) {
    $('#infoMenu')
        .load('main.php?worldID='+worldID+'&menu #infoMenu', function(data){
          $('#infoMenu').animate({ height: '500px' }, 1000);
        })
        .html('Loading...');              
}

但请确保 css 具有设置的高度和 overflow: hide;

---

编辑：更好的是，设置 overflow:scroll 然后将动画设置为滚动高度：

$('#infoMenu').animate({ height: $('#infoMenu')[0].scrollHeight }, 1000);