jQuery:show()与slideDown()-对$(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）能解释一下吗？：）[BTW，我使用的是Firefox 9.0.1.]

Answer 1

在测量高度之前，您必须等待slideDown()动画完成。对slideDown()的函数调用立即结束（此时我假设您测量文档高度），但动画才刚刚开始，因此项目的高度几乎没有变化。slideDown方法所做的就是启动动画（然后随着时间的推移在计时器上运行到完成）。所以，你可能正在做的是在动画开始后，在它完成之前很久测量高度。

如果你想在slideDown()动画完成后测量文档高度，那么你需要通过完成回调函数（当动画最终完成时发出信号）这样做：

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