I've implemented a Counter that counts from 0 to a specified number, and it seems to be working perfectly. However, I want to add an animation where the background color of a div height animates upwards corresponding to the percentage of the counter.
For example, when the counter reaches 50%, the green background should animate to cover 50% of the div height, all in sync and at the same speed, starting and stopping simultaneously.
I have provided my code on JSFiddle, but I'm aware that it's not running smoothly and the code looks a bit messy. http://jsfiddle.net/QGNKt/3/
Can someone help me clean up this code? Am I heading in the right direction? Assistance in improving the JSFiddle code would be greatly appreciated. I believe the current code might work eventually, but it seems too disjointed - although maybe what I have now will suffice - who knows!
<head>
<style type='text/css'>
#container {
position: relative;
overflow: hidden;
height: 60px;
width: 100px;
}
#green {
height: 600px;
width: 100px;
background: #090;
position: absolute;
top: 60px;
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: 40
}, 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>