jQuery垂直动画条教程

Question

我不确定我是否可以在这里问这个问题 - 但我一直在尝试找到一个单个动画栏的教程，用 jquery/svg 完成(可能使用 .animate，我思考)。

我并不是想找到一个加载栏，我只是想要一个实际显示(例如)0 到 24 摄氏度可视化效果的栏。

我无法想象如何实际做到这一点，而且我实际上也找不到关于它的教程。谁能给我指点一个教程(或者明确的提示，我知道你们在这里强调个人的努力工作，我也想学习)，我可以真正理解如何做到这一点？

这是一个粗略的可视化:

0 Deg                          24 Deg
******                          ____
******                          |  |
******                          |  |
******                          |  |
______      animates to        _|__|_ 

Answer 1

这是 html/css 问题还是 javascript/jquery 问题？小样本演示了一种可能的方法:

<button id="start">start animation</button>
<div id="foo"></div>

#foo {
    background-color: rgb(235,235,235);
    box-shadow: 0 0 1px 1px rgb(130,130,130);
    width: 20px;
    height: 0px;
    margin: 50px;
    position: relative;
    top: 200px;
}

$(function() {
    $('#start').click(function() {
        $('#foo').animate({
            height: 200,
            top: 0
        });
    });
});

jsfiddle