Currently, I am in the process of creating HTML thermometers that are animated using jQuery to visually represent a percentage number. However, despite my efforts, I have not been successful in changing the color of the thermometer based on the level it represents. In the script provided in the Fiddle I've created, all thermometers end up being blue regardless of the value they indicate.
The jQuery code I am using is as follows:
$('.lvl').each(function(){
var level = $(this).text();
$(this).animate( {
width: level+'%'
}, 1000);
var lvlwidth = $(this).width();
if (lvlwidth < 80) {
$(this).css('background-color', 'blue');
} else if (lvlwidth > 80) {
$(this).css('background-color', 'yellow');
}
});
Update: My goal is for the color of the bar to change dynamically as it grows. For example, I want it to be blue when it's under 40, then switch to yellow, and finally turn red when it reaches 80.