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来显示＆＃34;显示＆＃34;看起来正在增长的图表。

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

CSS jquery使用像素从底部到顶部移动div

3 个答案: