jquery: animate function problem

Question

i start learning jquery just yesterday. i have a div element with some content, and i want to hide it by changing it's height: here is the script

 <script type="text/javascript">
    $(document).ready(function(){
        $("#hide").click(function(){
            $("#cont").animate({
                height: '0'
                },1500);
            $("#cont").hide();
        });
    });
    </script>

<input type="button" value="hide" id="hide">
<div  id="cont">
text here...
</div>

but it doesn't work, becouse it automaticaly sets display:block to #cont element, so after animation it starts to show. when i try to set display:none to #cont element, it doesn't happen. could you help me? thanks

Answer 1

You could use the slideUp method:

The .slideUp() method animates the height of the matched elements. This causes lower parts of the page to slide up, appearing to conceal the items. Once the height reaches 0, the display style property is set to none to ensure that the element no longer affects the layout of the page.

$("#hide").click(function(){
    $("#cont").slideUp();
});

Answer 2

thanks Felix Kling, it works: but just now i find the solution with animate function too: it looks like this

$("#hide").click(function(){
   $("#cont").animate({
    height: '0'
    },1500).hide(1500);
  });