jquery hide height

Question

Hello, why is the height value of the test div the same before and after the hide animation?

$(document).ready(function() {        
    $("#test").hide("slow", function() {  
       alert($("#test").height());  
   });
});

<div id="test">
    test
    <br />
    test
    <br />
    test
</div>

Answer 1

Hide() function only hides the div, it doesn't modify the height. Only adds a style="display: none;" to the element.

Answer 2

I'm not completely sure on how the hide() animation works exactly, but if it does change the stlye-size of the element to achieve the shrinking effect, it probably reverts that to the original size after the animation is done.

The way jQuery really hides things is by setting one of the css styles which hides an element (I think it just sets display: none;). The animation is just some fancy effects that don't really permanently change the element.

Answer 3

you can wirte in the callback style.height=' ';