Question

This is bizarre. I have a div. It is set with display: none.

If I use $('#id').show(); then $(document).height() is updated with the height of #id.

However, if I use $('#id').slideDown(); then $(document).height() remains unchanged.

If you would like to test it, try the following:

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

Could a jQuery Master (jQM) explain this, please? 🙂 [BTW, I am using Firefox 9.0.1.]

Answer 1

You will have to wait for the completion of the slideDown() animation before measuring the height. The function call to slideDown() finishes immediately (at which point I assume you measure the document height), but the animation has only just begun so the item has barely, if at all, even changed height yet. All the slideDown method does is start the animation (which then runs to completion on timers over time). So, what you’re probably doing is measuring the height right after the animation is started, long before it’s done.

If you want to measure the document height after the slideDown() animation finishes, then you need to do so from a completion callback function (which signals when the animation is finally done) like this:

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