Jquery background animate

Question

background-color이 작동하지 않기 때문에 jQuery에서 애니메이션을 적용 할 수 있습니까?

$('#something').animate({ 
    background :"red" 
}, 1000); 

Answer 1

당신은 jQuery를 함께 컬러 애니메이션을 할 수있는 플러그인이 필요합니다 다음 docs에서

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

Answer 2

,

The jQuery UI project extends the .animate() method by allowing some non-numeric styles such as colors to be animated. The project also includes mechanisms for specifying animations through CSS classes rather than individual attributes.

당신이 jQuery를 UI를 사용하는 경우 그래서, 당신은 애니메이션을 적용 할 수 있습니다 배경 색상. backgroundColor을 사용하고 background이 아닌지 확인하십시오.

jQuery의 경우 color animations plugin도 사용합니다.

라이브 예 : http://jsfiddle.net/thai/NXejr/2/

Answer 3

이 시도 :

$('#something').animate({ backgroundColor: "#FF0000" }, 1000, null, function() { 
     $('#something').css("backgroundColor", "#FF0000"); 
    }); 

나는 애니메이션과 다양한 성공하지만, 발견 했어 사용하여 콜백 내장 플러스 jQuery의 CSS는 대부분의 경우에 작동하는 것 같다. IE9, FF4, Chrome에서 jQuery 1.5를 사용하여 테스트되었습니다. 보다 완벽한 솔루션을

은이 플러그인을 추가

$(document).ready(function() { 

    $.fn.animateHighlight = function (highlightColor, duration) { 
     var highlightBg = highlightColor || "#FF0000"; 
     var animateMs = duration || 1000; 
     var originalBg = this.css("background-color"); 

     if (!originalBg || originalBg == highlightBg) 
      originalBg = "#FFFFFF"; // default to white 

     jQuery(this) 
      .css("backgroundColor", highlightBg) 
      .animate({ backgroundColor: originalBg }, animateMs, null, function() { 
       jQuery(this).css("backgroundColor", originalBg); 
      }); 
    }; 
}); 

을하고 그래서 같이 호출 :

$('#something').animateHighlight(); 

Answer 4

당신은 같은 효과 CSS3 전환을 사용할 수 있습니다. 당신의 애니메이션이 솔루션

#something { 
    -webkit-transition: background-color 1s linear; 
    transition: background-color 1s linear; 
    background: red; 

} 

유일한 문제 achived 수 IE < 10 지원

Answer 5

유사한 구문 (...{background-color :"red"}...)를 사용하여, 나는 오류

SyntaxError: Unexpected token -

내가 할 수 있었다를 얻을 작은 따옴표로 CSS 속성 background-color을 캡슐화하여 작동 시키십시오.

$('#something').animate({ 
    'background-color' :"red" 
}, 1000); 

Answer 6

이 순수 jQuery를 사용하여 RGB 색상을 애니메이션 간단한 코드는

var start = [255, 0, 0], end=[255,255,255]; 
$('#element').animate({'aaa': 1}, {step: function(now){ 
    $(this).css('background-color', 'rgb('+ 
     parseInt(start[0] + (end[0]-start[0]) * now) + ',' + 
     parseInt(start[1] + (end[1]-start[1]) * now) + ',' + 
     parseInt(start[2] + (end[2]-start[2]) * now) + ')' 
    ) 
}, complete: function(){$(this).css('aaa', 0)}})