0

我有一个从 0 计数到指定数字的计数器 - 我认为这很完美。随着数字的增加，div 高度的背景颜色也应该向上动画到计数器的该百分比。

所以 50% Counter 应该为 div 高度的 50% 的绿色背景设置动画——所有这些都同时同步和相同的速度，同时停止和启动。

我在这里有我的小提琴代码 - 但我知道它不能完美地工作并且代码有点分开。 http://jsfiddle.net/QGNKt/3/

有人可以指导我清理一下吗？我在写轨道上吗？润色 JSFiddle 代码的帮助会很有帮助。我知道我可以使用我没有的代码来处理它 - 但代码似乎分开了 - 也许我现在拥有的会做 - 大声笑

<head>
    <style type='text/css'>
        #container {
            position: relative;
            overflow: hidden;
            height: 50px;
            width: 50px;
        }

        #green {
            height: 500px;
            width: 50px;
            background: #090;
            position: absolute;
            top: 50px;
            left: 0;
        }
    </style>

    <script type='text/javascript'>//<![CDATA[ 
        $(window).load(function () {
            function createCounter(elementId, start, end, totalTime, callback) {
                var jTarget = jQuery("#" + elementId);
                var interval = totalTime / (end - start);
                var intervalId;
                var current = start;
                var f = function () {
                    jTarget.text(current);
                    if (current == end) {
                        clearInterval(intervalId);
                        if (callback) {
                            callback();
                        }
                    }
                    ++current;
                }
                intervalId = setInterval(f, interval);
                f();
            }
            jQuery(document).ready(function () {
                createCounter("counterTarget", 0, 50, 2000, function () {
                    //alert("finished")
                })
            })
            //]]>

            $(document).ready(function () {

                $('#green').animate({
                    top: 30
                }, 2300, function () {
                    //$('#button').val('down');
                });
            });
        });//]]>  

    </script>
</head>
<body>
    <h1 style="font-size: 135px" id="counterTarget"></h1>
    <h1 class="f-l">%</h1>

    <div id="container" style="border: Red solid 1px;">
        <div id="green"></div>
    </div>
</body>
4

1 回答 1

1

我已经整理了你的代码并整理了一下。您是否尝试过为进度条等使用预制解决方案？看看Twitter Bootstrap。

小提琴：http: //jsfiddle.net/BenedictLewis/QGNKt/6/

于 2013-04-13T01:49:04.567 回答