Jquery计数器与背景颜色动画

Jquery Counter with Background color Animate

本文关键字：颜色 动画 背景 计数器 Jquery      更新时间：2023-09-26

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

所以50%的计数器应该动画绿色背景的div高度的50% -所有这些都在同一时间和相同的速度同步，停止和开始在同一时间。

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

谁能帮我清理一下吗?我在写作轨道上吗?对JSFiddle代码进行润饰将会很有帮助。我知道我可以让它与代码工作，我没有-但代码似乎分开-也许我现在会做什么- lol

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

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

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

相关文章：