CSS 배경을 jQuery 조건으로 변경하십시오.

Question

일부 html 온도계는 jQuery로 애니메이션화되어 백분율 숫자를 나타냅니다 (in the 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

UPDATE :

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); 


});