以前、2007年に、jQuery Color Pluginをリリースし、それ以来、カラーアニメーション機能を提供してきました。 現在、このプラグインの2番目のバージョンを準備しています。これにより、API、RGBA、HSLA、およびその他の多くの機能が追加されます。 ベータ版の時間が来ました！ このプラグインのリポジトリはgithub.com/jquery/jquery-colorにあります。 また、code.jquery.comでは、 2つのバージョンのプラグインも利用可能です- 圧縮 解除および縮小機能で圧縮されています 。

新機能の概要

RGBA

色値のRGBA形式をサポートするようになりました。 RGBAをサポートしないブラウザーでは、要素に最も近いbackgroundColor値を使用して、中間色近似を計算します。 これは「真の」 アルファ透明度ではありませんが、この方法は、プレーンな背景と相互作用するとき、少なくともアルファの錯覚を提供します。 Opera 10、Chrome 10、Firefox 3.6、およびIE 6 がデモアルファオーバーレイを実行すると、次のようになります。

HSLA

また、上記の手法を適用するアルファを除き、すべてのブラウザーでHSLAカラー値の表示をサポートするようになりました。

使いやすいAPI

プライベートユーティリティメソッドの単純なグループの代わりに、 $ .Color（）呼び出しが使用され、新しいColorオブジェクトが作成されます。 新しいColorオブジェクトは、色の名前、16進数の色コード、 CSSのような RGBAまたはHSLA値、 RGBA値の配列、または色成分を持つオブジェクトなど、いくつかの異なる方法で初期化できます。 .red（） や .hue（）などの各色成分のヘルパーメソッドがあり、その値を読み取ったり設定したりできます。 ヘルパー関数（たとえば、 .toRgbString（） 、.transition（） 、および .is（） ） と組み合わせて、 $ .Colorオブジェクトはすべての色のニーズを提供できるようになりました。 すべての新機能の概要については、 github.com / jquery / jquery-colorの READMEをご覧ください。 jQuery.Colorは単純な色のアニメーションに適しているだけでなく、複雑な色の計算やアニメーションにAPIを使用できるようになりました！

即時の例：

//   Color  : var red = $.Color( 'rgba(255,0,0,1)' ); //  CSS- //    Color    : var orange = $.Color( '#FF0000' ).green( 153 ); //       : var between = $.Color([ 255, 0, 0 ]).transition( "blue", 0.5 );
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

部分カラーアニメーション

1つまたは2つの色成分のみを指定する機能を追加したため、色を部分的にアニメーション化できます（以下に例を示します ）。

 //       elem.animate({ backgroundColor: $.Color({ saturation: 0 }) }, 1000);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

エラーメッセージ、新機能の提案

新しいカラープラグインの問題を報告する場合、または新しい機能を提供する場合は、 githubにお問い合わせください 。



また、新しい$ .Colorベータ版の素晴らしい例をいくつか見せてください。コメントで共有してください。