單擊按鈕時動畫div的高度

Question

我試圖在單擊菜單按鈕時，將下拉菜單div的高度從0到250px設置爲動畫。我嘗試使用jQuery。

這包括在我的HTML：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
<script src="scripts.js"></script> 

菜單按鈕是一個跨度：

<span id="menu_btn" name="menu_button">MENU</span> 

這是下拉菜單：

<div id="menu_dropdown"> 
    <ul> 
     <li><a id="on" href="#">HOME</a></li> 
     <!-- more buttons --> 
</div> 

這是jQuery：

$("#menu_btn").toggle(function(){ 
    $("#menu_dropdown").animate({'height': '250px'}, 100); 
}, function(){ 
    $("#menu_dropdown").animate({'height': '0px'}, 100); 
}); 

但它不起作用。爲什麼是這樣？

Answer 1

我想這是你想要什麼：

$("#menu_btn").on('click', function() { 
    $("#menu_dropdown").slideToggle(100); 
}); 

改變高度可能不會工作，因爲它不會阻止對所顯示的內容。 slideToggle()更改display屬性，這將工作。

參見http://api.jquery.com/slideToggle/

Answer 2

跨度不是一個按鈕或錨標記。您還需要首先捕捉點擊事件才能使用切換。

http://jsfiddle.net/3w2tt1wm/

Take alook 

Answer 3

嘗試在你的動畫調用，而不是像下面使用匿名函數。然後，你可以顯式地獲取你想要改變高度的元素，並使用jquery的.height（HEIGHT）或.css（「height」，HEIGHT）;

$("#menu_btn").toggle(function(){ 
    $("#menu_dropdown").animate(function(){$("#menu_dropdown").css("height", "250px");}, 100); 
}, function(){ 
    $("#menu_dropdown").animate(function(){$("#menu_dropdown").css("height", "0px");}, 100); 
}); 

此外，您沒有顯示它，所以只需確保切換處於單擊或鼠標懸停處理函數。否則它不會對你有任何好處。