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

Felix Kling · Accepted Answer · 2010-05-06 11:46:43Z

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

answered May 6, 2010 at 11:46

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Simon · Accepted Answer · 2010-05-06 12:00:13Z

0

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

edited May 6, 2010 at 12:00

answered May 6, 2010 at 11:54

Simon

23.2k36 gold badges95 silver badges123 bronze badges

Collectives™ on Stack Overflow

jquery: animate function problem

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related