javascript 更改内部 html 后自动调整 div 高度

Question

该网站的位置如下：http://pwnage.me/
javascript 位于此处：{site}/scripts/main.js

我正在使用 jQuery 将内容动态加载到主页上的 #container div 中。当您单击主页上的链接（例如“测试项目 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

您可以尝试在动画中执行此操作，而不是尝试指定确切的高度。此外，将加载微调器放在与内容区域分开的 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);

我希望这将帮助您走上正轨。

Answer 2

您尝试过 $.slideDown() 吗？

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

容器无法正确调整大小的原因是内容的静态高度设置太小。

Answer 3

问题似乎是您已将容器高度固定为 67px。
与在加载 html 之前没有固定容器高度的示例相比。