Change CSS background with jQuery conditionals

I'm building some html thermometers, which are animated with jQuery in order to show represent a percentage number (as you can see in the Fiddle I've built).

What I want, and I can't figure out what I'm doing wrong, is to get the thermometer's color to change depending the level they are representing. For instance in the Fiddle's script those under 80 should be color blue, and those over 80 should be yellow, but all of them turn out blue.

This is the jQuery code:

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