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