[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のスピードでフェードのアニメーションを実行します。

sponsors

top of page

©2018 coliss