格動畫從底部到頂部，而不是從上到下的jQuery

Question

我有一個div觸發點擊功能時動畫播放至其height：

$('#menu').click(function() { 
    $('#test').animate({ 
     height: 'toggle' 
    }, 290, function() {  
    }); 
}); 

工作好爲止。但我想從下到上對div進行動畫處理，而不像在fiddle中看到的那樣。

任何解決方案？

Answer 1

你可以把它放在一個容器中，並將其定位絕對?:

HTML：

<a href="#" id="menu">click me for menu</a> 
    <div id="cont"> 
    <div id="test"></div> 
</div> 

CSS：

#cont{ 
    height:500px; width:50px; position:relative; 
} 
#test{ 
    height: 500px; width: 50px; background-color: #000; display: none; position:absolute; bottom:0; left:0; 
} 

的JavaScript：

$('#menu').click(function() { 
    $('#test').animate({ 
     height: 'toggle' 
     }, 290, function() { 
    }); 
}); 

Fiddle

編輯：爲什麼它的工作原理
我已經放在一個容器周圍的菜單，並賦予它的風格position:relative。我認爲什麼是菜單（#test）已經給出這意味着你可以根據top，right，bottom和left它定位風格position:absolute，相對於包含元素（只要它具有比默認position等，因此我們給予集裝箱一個relative的位置）。如果我們給元素一個top:0;left:0，元素的左上角將會粘到它父元素的左上角，同樣，如果我們做了top:0;bottom:0，這個元素的左下角將會粘到它父元素的左下角。 Rambling，不是嗎？因此，總而言之，#test被「卡住」在其父母的底部，因此它從底部開始動畫。還有一點，容器的高度很重要！因爲我們已經給出了絕對位置#test，所以它不會將容器推到高度，所以我們設置高度以確保#test從容器頂部加載500px。