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 日本語リファレンス

サンプルファイルをダウンロードしたい方はこちらから

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

jQueryで16進数の背景色をアニメーション(フェード)させる方法

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR