jQueryでは通常、背景色や文字色などでの16進数を使った色指定「#ffffff」といった値を
アニメーション処理させることは出来ません。（数値化されていない値は処理できない。）
これらの色指定をアニメーション処理させるには、値を数値化することが必要になるのですが
簡単にそれらの処理をしてくれるプラグイン「jquery.color.js」というものがあったのでご紹介。
Color Animations
≫Color Animations | jQuery Plugins
このプラグインファイルを使うことで16進数で指定された色指定を
「rgb(nn, nn, nn)」の様な感じに変換して処理してくれます。
例えば、
——————————————————-
白「#ffffff」 → 「rgb(255,255,255)」
黒「#000000」 → 「rgb(0,0,0)」
赤「#ff0000」 → 「rgb(255,0,0)」
——————————————————-
となります。
この16進数の色指定をアニメーション処理できないのは
意外と面倒に感じたりすることがあったので今後は便利に使えそうです。
このプラグインを使うと今日GIZMODOさんに組み込まれた
節電ページのような仕組みも簡単に実装できます。
jQuery BG COLOR CHANGE【SAMPLE】
＜body＞に指定した背景色を「消す」「つける」といったボタン（リンク）で
フェードしながら変化させます。
jQueryファイルとプラグインファイルを読み込んで
以下のようなSCRIPTで実現しています。
◆SCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.color.js"></script>
<script type="text/javascript">
$(function(){
$('body').css({backgroundColor:'#fff'});
$('body').prepend('<a href="#" id="switch">消す</a>');
$('#switch').toggle(function(){
$('body').stop().animate({backgroundColor:'#555'},500);
$('#switch').html('つける');
},function(){
$('body').stop().animate({backgroundColor:'#fff'},500);
$('#switch').html('消す');
});
});
</script>
背景色でなくとも、文字色などでも16進数の色指定をしているものなら
何でもアニメーション処理をさせることが可能になります。
フェードさせる為にあえて画像処理にする必要もなく、
16進数をアニメーション処理させる際に便利になりそうです。
ご参考までに。。。
【参考記事】
≫jQueryのanimateで背景色や文字色の変化をできるようにするプラグイン『Color Animations』 | THE HAM MEDIA BLOG
≫animate(params, [duration], [easing], [callback]) – jQuery 日本語リファレンス