※この記事は、軽めのjQuery Advent Calendar 2012の13日目の記事です。

jQuery Color というjQueryプラグインが、公式ブログで先月末にアップデートがアナウンスされていた。

jQuery Colorというと、デフォルトのanimateメソッドでは対応していない、colorやbackgroundColorなどのプロパティおよびその値もアニメーションさせるプラグイン。

今となってはCSS3のTransitions/Animationsで色を扱ったアニメーションなんかはできちゃうわけですが、地味にアップデート、バグフィックスされているということでニーズはきっとあるのでしょう。

触ってみる

手っ取り早く、CDNからjQuery本体と、プラグインファイルを取ってきましょう。

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/color/jquery.color-2.1.1.js"></script>

そしてそのままREADMEにあるサンプルを見ながらの軽い解説。サンプルをCodepenにアップしたので、こちらで確認できます。

これが結局どういうことをやっているかというと、簡潔にいえば、animateメソッドで変化させる値は数値でなければいけないので、#FF0000みたいなHEX値を、rgb(255,0,0)のようなRGB値にすることでアニメーションできるようにしている様子。

その他色々メソッドがある。例えばHSLAの値返したりとか。 （CSSのHSLのことは、CSSでの色指定について。半透明とかキーワードとか、ご存知でした？ | Ginpen.comなど参照。）

var hsla = $.Color($("#block"),"backgroundColor").hsla();
console.log(hsla);
// [74, 0.6425120772946858, 0.5941176470588235, 1] 
var hue = $.Color($("#block"),"backgroundColor").hue();
console.log(hue);
// 74 

もうちょっと面白そうなサンプル

こちらもサンプルが拝借します。。

Sam Dunn氏の記事より、Spectrumな表現をするサンプルです。こちらもサンプルはCodepenで。

$(function() {  
  
  spectrum();  

  function spectrum(){  
    var hue = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';  
    $('#spectrum').animate( { backgroundColor: hue }, 1000);  
    spectrum();  
  }  
  
});  

単純にランダムでRGB値を回しているというだけですが、こういうもできるよ、ってことで。

アドベントカレンダーは続く

次はtoshimaruさんですね、よろしくおねがいします。