具有背景颜色动画的Jquery计数器
具有背景颜色动画的Jquery计数器
提问于 2013-04-13 09:29:19
我有一个计数器，可以从0计数到指定的数字--我想这很好用。随着数字的递增，div高度的背景颜色也应该向上动画到计数器的该百分比。
所以50%的计数器也应该动画50%的div高度的绿色背景-所有这些都在同一时间和相同的速度，停止和开始在同一时间。
我在这里有我的小提琴代码-但我知道它不能完美地工作，代码有点分离。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>回答 1
Stack Overflow用户
发布于 2013-04-13 09:49:05
我整理了你的代码，整理了一下。你有没有试过使用预制的进度条之类的解决方案？看看Twitter Bootstrap吧。
小提琴：http://jsfiddle.net/BenedictLewis/QGNKt/6/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15983211
复制相关文章
相似问题
腾讯云开发者
