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

Question

  

可能重复：
  jQuery Animation - Smooth Size Transition

我有一个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: hidden;

---

编辑：更好的是，设置overflow:scroll然后设置为scrollHeight：

的动画

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