JQuery .animate() 完成函数在完成前执行

Question

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

在执行此操作时，我希望容器 div (#content) 的高度通过动画调整到新内容的高度。所以我为容器 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-20 像素，但没关系。

Answer 1

嗯，没有任何源代码很棘手，但我的直觉是，出于某种原因，您的 #content 和 #inner_content div 实际上是相同的高度（我猜是 0），这导致了动画立即执行，因此也立即触发事件。

你能提供任何来源吗？

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

1. 在隐藏的单独div 中加载新内容
2. 获取新内容的高度
3. 动画当前内容
4. 用新内容更新当前内容