jQuery：show() 与 slipDown() - 对 $(document).height() 的不同影响！

Question

这很奇怪。我有一个div。它是用 display: none 设置的。

如果我使用 $('#id').show(); ，则 $(document).height() 将更新为 #id 的高度。

但是，如果我使用 $('#id').slideDown(); ，则 $(document).height() 保持不变。

如果您想测试它，请尝试以下操作：

console.log("before",$(document).height());
$('#id').show(); //slideDown();
console.log("after",$(document).height());

请 jQuery Master (jQM) 解释一下吗？ :) [顺便说一句，我使用的是 Firefox 9.0.1。]

Answer 1

在测量高度之前，您必须等待 slideDown() 动画完成。对 slideDown() 的函数调用立即完成（此时我假设您测量了文档高度），但动画才刚刚开始，因此该项目几乎没有（如果有的话）甚至改变高度。 SlideDown 方法所做的只是启动动画（然后随着时间的推移在计时器上运行至完成）。因此，您可能要做的是在动画开始后、在动画完成之前很久就测量高度。

如果您想在 slideDown() 动画完成后测量文档高度，那么您需要通过完成回调函数（动画最终完成时发出信号）来执行此操作，如下所示：

console.log("before",$(document).height());
$('#id').slideDown(function() {
    console.log("after",$(document).height());
});