javascript更改了內部html后自動調整div的高度

Question

該站點位於此處： http : //pwnage.me/
javascript位於此處：{site} /scripts/main.js

我正在使用jQuery將內容動態加載到主頁上的#container div中。 當您單擊主頁上的鏈接（例如“ Test Project 1”）時，它將從ajax.php加載內容，並將新的html粘貼在#container div中。 我嘗試了很多不同的解決方案，但無法適應新內容。 它只是延伸到div的末尾而已。 但是，如果您轉到http://pwnage.me/projects/test ，它將按預期工作。 我嘗試使用與頁面加載相同的方式，但是不起作用：

$('#container').html(d);
var h = $('#container').height();
$('#container').html(load_html); // load_html is a predefined var that holds html of a loading image
$('#container').animate({ height: h, opacity: 0 }, 300); // open to new height and fade out loading image
setTimeout("$('#container').html(d);", 300); //  d is saved in a global var so this works
setTimeout("$('#container').animate({ opacity: 1 }, 300);", 300);

因此應該：

1. 獲得新的高度
2. 加載圖片html
3. 將高度滑出至新值並淡出
4. 加載新的HTML
5. 淡入

它可以正常工作，除了第一次加載新的html時，div永遠不會擴展高度以適合新的內容，因此它會獲得舊的高度值。

Answer 1

您是否嘗試過$ .slideDown（）？

var html = $(d);
d.wrap('<div />')
    .hide()
    .appendTo($('#container'))
    .slideDown();

容器無法正確調整大小的原因是因為內容設置的靜態高度過小。

Answer 2

問題似乎是您已將容器高度固定為67px。 與在加載html之前沒有固定容器高度的示例相比。

Answer 3

您可以嘗試以動畫形式執行此操作，而不是嘗試指定確切的高度。 此外，將加載微調器放在與內容區域分開的div中：

$('#container').animate({ height: 'hide', opacity: 0 }, 300, function() {
    $('#container').empty();
    $('#loading').fadeIn();
});

當您擁有新內容時（即在AJAX請求的結尾），請執行以下操作：

$('#loading').hide();
$('#container').html(d).animate({ height: 'show', opacity: 1 }, 300);

我希望這會幫助您步入正軌。