jquery：動畫功能問題

Question

我剛開始學習jquery就在昨天。我有一些內容的div元素，我想通過改變它來隱藏它的高度： 這裏是腳本

<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> 

，但它不工作，becouse它automaticaly設置display:block到#cont元素，所以後它開始顯示動畫。 當我嘗試將display:none設置爲#cont元素時，它不會發生。 你能幫助我嗎？感謝

Answer 1

你可以使用slideUp方法：

的.slideUp()方法動畫匹配元素的高度。這會導致頁面的較低部分向上滑動，看起來隱藏了這些項目。一旦高度達到0，顯示樣式屬性設置爲none，以確保該元素不再影響頁面的佈局。

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

Answer 2

感謝費利克斯克林，它的工作原理： 就好，我現在找到動畫功能的解決方案過於： 它看起來像這樣

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