Jquery background animate

Question

jQueryでbackground-colorをアニメートすることは可能ですか？

$('#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に組み込まれて使用することは、ほとんどの場合のために働くように見えることを発見しました。 jQuery 1.5を使用して、IE9、FF4、Chromeでテスト済みです。より完全なソリューションについては

は、このプラグインを追加します。

$(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サポート同様の構文（...{background-color :"red"}...）を使用して

Answer 5

ですが、私はエラー

SyntaxError: Unexpected token -

を取得し、私はすることができましたCSSプロパティーbackground-colorを一重引用符で囲みます。

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

Answer 6

これは実際にどのように円滑にDIVの背景を変更する簡単な純粋のjQueryを使用して、RGBの色をアニメーション化するためのコード（およびないjQuery.Colorプラグインを使用して）

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