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

所以它应该：

获得新的高度
加载加载图片html
将高度滑出新值并淡出
加载新的html
淡入

除了第一次加载新的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);

我希望这会帮助你走上正轨。

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

3 个答案: