값을 기반으로 배경색으로 페이드 아웃

Question

div의 배경색을 변경하려면 Jquery 애니메이션 기능을 사용하려고합니다. 난수가 50 미만이면 빨간색으로, 50보다 높으면 녹색으로 움직입니다. 색상 변경을 제외한 모든 것이 효과가있는 것 같습니다. 내가 여기서 뭘 잘못하고있는거야?

function randomInt(min,max) { 
    return Math.floor(Math.random() * (max - min + 1) + min); 
} 

if (randomInt(1, 100) > 50) { 
    $('#status').html("win").animate({backgroundColor: "green" }, "fast"); 
} else { 
    $('#status').html("lose").animate({ backgroundColor: "red" }, "fast"); 
} 

Answer 1

다른 CSS 속성과 달리 jQuery UI 또는 특수 색상 플러그인을 사용하여 색상을 애니메이션으로 지정해야합니다.

http://plugins.jquery.com/color/

Answer 2

아마하지 jQuery를 animate()에 있지만, CSS3 transition와.

CSS :

#status { 
    -webkit-transition: background-color 2000ms linear; 
    -moz-transition: background-color 2000ms linear; 
    -o-transition: background-color 2000ms linear; 
    -ms-transition: background-color 2000ms linear; 
    transition: background-color 2000ms linear; 
} 

jQuery를 :

function randomInt(min, max) { 
    return Math.floor(Math.random() * (max - min + 1) + min); 
} 

if (randomInt(1, 100) > 50) { 
    $('#status').html("win").css({ 
     backgroundColor: "green" 
    }); 
} else { 
    $('#status').html("lose").css({ 
     backgroundColor: "red" 
    }); 
} 

이 jsfiddle을 참조하십시오.

그러나 순수한 jQuery로이 작업을 수행하려는 경우 전체 UI 라이브러리보다 가벼운 jQuery Color을 사용할 수 있습니다.

Answer 3

Jquery UI 또는 특수 플러그인을 사용하지 않으려는 경우. ** 그냥 "녹색"또는 "빨간색"색상을 보여주고 싶다면 다른 작업 솔루션이 있습니다 :

function randomInt(min,max) { 
    return Math.floor(Math.random() * (max - min + 1) + min); 
} 
var status = $('#status'); 
if (randomInt(1, 100) > 50) { 
    status.append("win"); 
    status.css({backgroundColor: 'green'}); 
} else { 
    status.append("lose"); 
    status.css({backgroundColor: 'red'}); 
} 

Answer 4

왜 그냥 JavaScript와 CSS로하지 않습니까?

은 그냥이 Fiddle