[JS]背景やボーダーの不透明度をアニメーションで変更するスクリプト -Transify

IE6にも対応した、指定したエレメントの背景やボーダーの不透明度をアニメーションで変更するjQueryのプラグインを紹介します。

Transify - a jQuery plugin to easily apply transparency opacity to an element's background
デモページ

[ad#ad-2]

IE6でも、下記のように期待通りに表示されます。

IE6でのキャプチャ

Transifyの特徴

• あらゆるエレメントの背景とボーダーの不透明度を変更します。
• 設置は簡単で、軽量のスクリプト。
• 主要ブラウザの全てで動作します。
• 機能するのは、背景のカラー、背景の画像、ボーダーです。
• マウスのホバーで、不透明度をアニメーションで変更します。
• jQuery1.4.3でテスト済みです（前のバージョンでも動作します）。

[ad#ad-2]

Transifyの実装

「jquery.js」と「transify-min.js」を外部ファイルとして指定し、下記のように記述します。
「#selector」は任意のエレメントを指定します。

$('#selector').transify();

デフォルトでの不透明度は60%に設定されています。これはオプションで変更できます。

Transifyのオプション

スクリプトのオプションでは、下記の項目を設定できます。

opacityOrig

エレメントの不透明度（デフォルトは60%）

opactiyNew

フェードアニメーションで変更する不透明度

fadeSpeed

アニメーションのスピード（デフォルトは600）

percentWidth

エレメントの幅
※スクリプトやスタイルシートを使用して、別で幅は指定しないでください。

オプションを設定すると、下記のようになります。

$('#selector').transify({
   opacityOrig:.2,
   opactiyNew:.8,
   fadeSpeed:1000,
   percentWidth:'100%'
});

この設定ではエレメントを20%の不透明度で表示し、ホバーした際に80%の不透明度に1000のスピードでフェードのアニメーションを実行します。