【jQueryのプラグインを作ろう！】

第6回「ロールオーバーでフェードイン／アウト」
＊これはascii.jpで連載した記事の続きです。このため、このページを読む前にあらかじめascii.jpで連載した記事をお読み下さい。

text : 古籏一浩

■ロールオーバーの処理

　Webページ上では当たり前に見られるロールオーバーの処理を実現するjQueryプラグインを作成してみます。ここで作成するプラグインは画像の不透明度を変化させるタイプのロールオーバーです。つまり、2〜3枚の画像を入れ替えるタイプではありません。

■fadeTo()でフェード処理

　まず、プラグインの名前はimageBorderとしましょう。
　不透明度を変化させるにはfadeTo()を使います。マウスが重なったら不透明に、離れたら少し透明にします。fadeTo()の最初のパラメータがフェードするまでの時間になります。これはミリ秒で指定することになっています。200なら0.2秒でフェードさせるということになります。ただし、0を指定しても瞬時に変化しません。0.1などの値を指定すればほぼ瞬時にフェードさせることができます。
　不透明度はfadeTo()の2番目のパラメータで指定します。これは0〜1.0までの小数値で指定します。0が完全な透明、1が完全に不透明になります。ここでは、少しだけ透明にするので0.65くらいにしましょう。また、フェードまでの時間は0.2秒くらいにします。
　次に肝心なマウスが重なった時と離れた時の処理を書きましょう。jQueryではロールオーバーの処理はhover()を使えば簡単に書くことができます。最初のパラメータにマウスが重なった時に処理する関数、2番目のパラメータにマウスが離れたときに処理する関数を指定します。

　これでできあがりですが、もう１つ機能を追加します。それはスタイルシートのクラスも同時に切り替える機能です。スタイルシートのクラス名を切り替えるのに都合がいい命令がjQueryには用意されています。それはtoggleClass()です。パラメータに交互に追加／削除するクラス名を指定します。ここではjqIBRotateという名前のクラス名を切り替えるようにしています。ちなみに、サンプルではSafariやGoogle ChromeなどWebKitを使っているブラウザで画像が少し傾く（回転）するようにしています（-webkit-transform : rotate(-5deg);のように設定すると反時計まわりに5度回転します）。

　完成したプラグインのソースリストを以下に示します。

【プラグインのソース】

/* 写真風画像枠表示プラグイン for jQuery
2009.1 By KaZuhiro FuRuhata  */
$.fn.imageBorder = function(){
	return this.each(function(){
		$(this).addClass("jqImageBorder");
		$(this).hover(
			function(){
				$(this).fadeTo(200,1.0);
				$(this).toggleClass("jqIBRotate");
			},
			function(){
				$(this).fadeTo(200,0.65);
				$(this).toggleClass("jqIBRotate");
			}
		);
	});
}

■実際に使ってみよう

　それでは作成したプラグインを使ってみましょう。
　最初にjQueryライブラリファイルを読み込ませたあとにプラグインファイルを読み込ませます。

	<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
	<script type="text/javascript" src="js/imageBorder.js"></script>

　次にロールオーバーの処理を行う画像を指定します。

$("#mainContents img").imageBorder();

　これで指定した画像がロールオーバーするようになります（サンプルを実行する）。