CSS jquery使用像素從下到上移動div

Question

嘿，我有一個JSFiddle，我一直在嘗試使它從底部到頂部進行動畫製作，而不是從目前的做法，從上到下。

這將用作一個位於圖像前面的籌資金額的動畫​​條形圖，該條形圖將表示迄今爲止籌集的美元數量。

的的jsfiddle是在這裏：http://jsfiddle.net/kboucher/YDruG/

任何幫助將是巨大的！

更新

的HTML代碼：

<a href="#" id="button">View 100 (out of 500)</a> 

<div id="barGraph-container"> 
    <div id='barGraph'></div> 
</div>​ 

的JS：

$('#button').click(function(){ 
    $('#barGraph').animate({height:'72px'}, 500); 
}); 

的CSS：

#barGraph-container { 
    height: 200px; 
    position: relative; 
} 
#barGraph { 
    height: 200px; 
    width: 50px; 
    background-color: #000; 
    position: absolute; 
    bottom: 0; 
}​ 

Answer 1

嘗試在您的條形圖周圍放置容器，並使用絕對定位將其錨定到容器的底部。

像這樣：http://jsfiddle.net/kboucher/YDruG/

Answer 2

通過給圖巴的相對位置，並增加了頂部位置的動畫來彌補減少的高度，你可以很容易地做到這一點。

http://jsfiddle.net/GZeu3/19/

Answer 3

下面是一個使用2周到的div「揭示」，這看起來是生長曲線圖的例子。

http://jsfiddle.net/GZeu3/23/