jQuery只動畫頂部的值'高度'

Question

我最近有一個類似的線程關於這個，但現在我需要動畫塊的頂部。 現在，它從底部和頂部都進行動畫處理。

舉例來說，我希望它收縮，所以爲了得到我寫道：

$('#yellow').animate({height:'50%'},500); 

但是，無論是從頂部和底部位置中心收縮。

有沒有辦法讓它只從頂部位置縮小50％？

如果會的任何幫助，這裏有

CSS：

#yellow{ 
height:250px; 
width:500px; 
background-color:yellow; 
} 

HTML：

<div id='yellow'></div> 

Answer 1

您可以嘗試http://docs.jquery.com/UI/Effects

編輯：鏈接更新

看到一個小的演示：http://jsfiddle.net/rathoreahsan/ZMUz9/

Answer 2

你可以用一些絕對定位堅持你的塊的底部：

#yellow{ 
    position:absolute; 
    bottom: 0; 
    height:250px; 
    width:500px; 
    background-color:yellow; 
} 

注意：它也需要它的容器被定位。

Answer 3

這裏是在頂部位置縮小塊完整的解決方案：

HTML：

<div id="yellow">sdsds</div> 

CSS：

#yellow{ position:absolute; bottom: 0; height:200px; width:250px; background-color:yellow; } 

JQuery的：

$("#yellow").toggle(function() { 
$(this).animate({ 
    'height': '100px' 
}, 500); 

}，函數（）{$ （本）.animate（{ '高度'： '200像素' }，500）; }）;

我也創建與解決方案倉，所以試試這 http://codebins.com/codes/home/4ldqpc8