2013-02-17 4 views
0

jQuery를 사용하여 색상 사이에 애니메이션을 적용하는 방법. 즉, 한 색상을 페이드 아웃하고 다른 색상으로 페이드 아웃하는 방법입니다.jquery의 색상 전환 애니메이션

이것이 CSS3 키 프레임으로 할 수 있지만 w3schools에서 언급 한 Internet Explorer에서는 작동하지 않는다는 것을 알고 있습니다. 모든 브라우저에서 작동 할 수있는 표준 방법이 필요합니다.

stackoverflow에서 검색 할 때 jQuery 색상 플러그인이 필요하다고 언급했습니다. 누구든지 그것을 수행하는 간단한 방법에 대해 알고 있습니까?

답변

9

당신이 시도 할 수 있습니다 : Live Demo

CSS

#content { 
    width: 100%; 
    background: #eff6f4; 
    transition: background 4s linear; 
    -webkit-transition: background 4s linear; 
    -moz-transition: background 4s linear; 
} 

JQuery와는

$('#content').css('background', '#C89CBD'); 

이 4 초 배경색을 변경합니다.

$('#content').fadeOut(500, function(){ 
    $(this).css('background', bg).fadeIn(2000); 
}); 

그것은 할 좋은,하지만 작품을하지 않습니다 당신이 IE가 필요한 경우

업데이트

는, 당신은 이런 식으로 뭔가를 할 수 있습니다. Live Demo

+0

원래의 질문에서 : 당신이 오직 할 필요가있는 다른 스크립트가 포함되어 있습니다 – Dennis

+0

업데이트 대답 "하지만 Internet Explorer에서 작동하지 않습니다"... – ATOzTOA

+0

그것은 나를 도왔습니다. 덕분에 – almanegra

1

color plugin은 간단하면서도 단순하다고 생각하는 것이 확실하지 않습니다.

<script src="jquery.color.min.js"></script> 

다음 색상을 애니메이션 :

$(foo).animate({ 
     backgroundColor: "#00FF00" 
    }, 1000);