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

jQuery垂直动画栏教程

1 个答案: