javascript - 使用 jQuery 条件更改 CSS 背景

Question

我正在构建一些 html 温度计，它们使用 jQuery 进行动画处理以显示代表百分比数字(如您所见 in the Fiddle 我已经构建)。

我想要的是让温度计的颜色根据它们所代表的水平而变化，但我无法弄清楚我做错了什么。例如，在 Fiddle 的脚本中，80 岁以下的应该是蓝色，80 岁以上的应该是黄色，但他们都变成了蓝色。

这是 jQuery 代码:

$('.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');
    }
});

更新:正如我在下面的评论中所说，我想要的是随着它的增长动态改变颜色的条，例如当它低于 40 时是蓝色，然后变成黄色，并且当它达到 80 时变红。

Answer 1

更新:

http://jsfiddle.net/rpxr4bjj/3/

$('.lvl').each(function () {
    var level = $(this).text();
    $(this).animate({
        width: level + '%',
    }, {
        progress: function () {


            if (level < 80) {
                $(this).css('background-color', 'blue');
            } else if (level > 80) {
                $(this).css('background-color', 'yellow');
            }
        }
    }, 3000);


});