Question

有一个带有div (#content)填充的容器10px及其content (#inner_content)。我正在通过ajax加载一些新内容（新的html包含#inner_content div中的所有内容）并将＃content's html替换为新的html。

执行此操作时，我希望容器div (#content)的高度可以通过动画调整到新内容的高度。所以我设置了overflow：隐藏容器div，当我加载新内容时，我得到它的高度并将容器div设置为相同的高度。一切都很好，有时候高度可能会比需要的更大(10-20 pixels，这会给设计带来麻烦。

所以我在.animate()上放了一个完整的函数，在动画完成后将容器div的高度设置为''（auto），以便高度正确。问题是完整的功能立即运行，动画被跳过，高度立即变为自动。这是代码：

$("#content").html(response); 
$("#content").animate({height: $("#inner_content").height()+"px"}, 300, function () {
$("#content").css({height: ''});
});

我该如何解决这个问题？我需要执行动画，然后将高度设置为自动（这会导致过程中出现一个小的“间隙”，因为div会立即缩短10-20px但是没关系。

Answer 1

嗯，没有任何源代码它很棘手，但我的直觉本能说，出于某种原因，你的#content和#inner_content div实际上是同一个高度（我猜0），导致动画立即执行，从而立即触发事件。

您能提供任何来源吗？

我建议先在分区上使用outerHeight()方法，看看会发生什么。另外，请尝试关闭overflow: hidden，然后尝试以下伪代码：

将新内容加载到隐藏的单独div
获取新内容的高度
为当前内容设置动画
使用新内容更新当前内容

JQuery .animate（）在完成之前完成函数执行

1 个答案: