CODEWITHSUNDEEP
jquery
Simon
Simon

Reputation: 23141

jquery: animate function problem

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

Upvotes: 1

Views: 75

Answers (2)

Simon
Simon

Reputation: 23141

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);
  });

Upvotes: 0

Felix Kling
Felix Kling

Reputation: 816262

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();
});

Upvotes: 1

Related Questions