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