內容加載到DIV，並調整其大小的div使用jQuery

Question

可能重複：
jQuery Animation - Smooth Size Transition

我有一個div #infoMenu，其內容被替換爲下面的代碼：

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

我不知道我是否可以爲div的高度設置動畫，而不是僅僅「跳」進不同的heig這取決於新內容的空間。

謝謝！

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