シンプルに使うことができるフェードイン・フェードアウト ロールオーバーJavascript

以前からロールオーバの演出を行う際は、下記のsmartRollover.jsを使用させていただいておりました。
http://css-happylife.com/archives/2007/0621_0010.php

しかし、Flashのような演出をしてくれなどと言われることも多くなったので、jQueryを使ったて簡単にフェードイン・フェードアウトできる
スクリプトを作りました。これでちょっとだけサイトをリッチにできるはず。
作成する際、以下の記事を参考にさせていただきました。

http://css-happylife.com/archives/2007/0621_0010.php
http://suzken.com/2010/10/jquery-fade-rollover.html

■使い方
1. jQueryをダウンロード
2. ロールオーバ用のJSをダウンロード
3. 以下のようにヘッダ内からスクリプトを読み込みます。

	
	

4. ロールオーバ/ロールアウト用の画像を用意し、それぞれファイル名の最後に「_on」、「_off」としてください。
5. 最後に作成した画像をhtml内に記述するだけです。

	サンプルボタン

これだけです。
なるべく、以前から使用させていただいているsmartRollover.jsと同じような使い方ができるように作成しています。

動作サンプル

以下スクリプトです。
※よくクリックしてブラウザの戻るボタンで戻るとロールオーバ状態の画像のままになっていることがあります。
この現象が起きないように、ダウンした時に画像を切り替えています。不要であれば
「//ここいらないのなら削除してください。」からの3行ほどを削除してお使いください。

$(function()
{
		var targetImgs = $('img');
		
		targetImgs.each(function()
		{
			if(this.src.match('_off'))
			{
				
				this.rollOverImg = new Image();
				this.rollOverImg.src = this.getAttribute("src").replace("_off", "_on");
				$(this.rollOverImg).css({position: 'absolute', opacity: 0});
				$(this).before(this.rollOverImg);
				
				//ここいらないのなら削除してください。
				$(this.rollOverImg).mousedown(function(){
					$(this).stop().animate({opacity: 0}, {duration: 0, queue: false});
				});
				
				$(this.rollOverImg).hover(function(){
					$(this).animate({opacity: 1}, {duration: 400, queue: false});
				},
				function(){
					$(this).animate({opacity: 0}, {duration: 400, queue: false});
				});
				
			}
		});
});

■注意事項
・勝手に使ってください。
・使用に関しては自己責任でお願いいします。こちらでは、一切の責任を負いません。