jQueryのanimateで背景色や文字色の変化をできるようにするプラグイン『Color Animations』

2008/10/09

カテゴリ：: jQuery plugin紹介

タグ：: jquery; plugin; javascript; 色; COLOR

背景色や文字色の変化をできるようにする

はっ！？内容とリード文があってない！？
ってことでいつのまにやら修正しておく。

背景色とか文字色とか、色関係をアニメーションさせようと思っても、
どうやらjQuery単体ではアニメーションできない。

なぜ！？

とまぁ、背景とか色関係をアニメーションで使いたいなと思ったので、
色関係を扱えるようにするプラグインを見つけたので、メモエントリーしておく。

jQueryだけだと背景色と文字色はアニメーションできない

jQuery単体だけだと、背景色や文字色のアニメーションができないのです。
理由は下記の通りのようです。

数値型の値をとらない属性（backgroundColorなど）には、animate関数は対応していません。
animate - jQuery 1.2.6 日本語リファレンス

つまり、アニメーションさせるには変化させるための数値が必要。
ところが色の値などはデフォルトの状態では数値化処理できないので、
色の変化をさせることができないということらしいです。

デフォルト状態ではできないのですが、
このアニメーションを可能にするプラグインが存在します。

「Color Animations (jQuery Plugins)」

このプラグインを使う事で、色を数値としてみなして、変化させることができるのです。

色の書き方で、white(白)とかblock(黒)とか書いているとわからないと思うのですが、
#ffffff(白)や#000000(黒)などのように、
0～9とa～fまでを使った16進数で表すことができるのです。

この６桁の数値をを2桁事に区切って10進数にすると0～255。
例えばblue(青)なら16進数で#0000ff、10進数にすると[0,0,255]になります。

今回のプラグインでは色をこの０～255にすることで
アニメーション可能にしているという仕組みになっているようです。

使ってみる

いつものよう使ってみました。

■ HTML

<button class="preview01">クリック</button>
<p class="preview01">デモデキスト</p>
<button class="preview02">クリック</button>
<p class="preview02">デモデキスト</p>
<button class="preview03">クリック</button>
<p class="preview03">デモデキスト</p>

■ JavaScript

(function($){
  $(function(){
    $("button.preview01").click(function(){
      $(".preview p.preview01").animate( {
        backgroundColor: '#ff00ff',
        color: '#000000'
      }, 1000)
      .animate( {
        backgroundColor: '#0000ff',
        color: '#ffffff'
      }, 1000);
    });
    $("button.preview02").click(function(){
      $(".preview p.preview02").animate( {
        color: '#000000'}, 1000)
        .animate( { color: '#0000ff'}, 1000)
        .animate( { color: '#ff00ff'}, 1000)
        .animate( { color: '#ff0000'}, 1000)
        .animate( { color: '#00ff00'}, 1000)
        .animate( { color: '#000000'}, 1000);
    });
    $("button.preview03").click(function(){
      $(".preview p.preview03").animate( {
        backgroundColor: '#000000'}, 1000)
        .animate( { backgroundColor: '#0000ff'}, 1000)
        .animate( { backgroundColor: '#ff00ff'}, 1000)
        .animate( { backgroundColor: '#ff0000'}, 1000)
        .animate( { backgroundColor: '#00ff00'}, 1000)
        .animate( { backgroundColor: '#000000'}, 1000);
    });
  });
})(jQuery);