jstarted.com
JavaScript/HTML/CSSのノウハウや覚書を掲載するブログ
2013.10. 3

要素の透過度を変更するマウスオン効果をjQueryメソッド化する

Category:

コーディングをしていると、過去に書いたコードのなかで頻繁に流用するものが出てくるわけですが、jQueryプラグイン自作の初歩も兼ねて、そういった命令をjQueryメソッドにして管理する書き方をしてみました。

主に使用したのは、jQuery.fn と jQuery.extend です。
jQuery.fnを使えばjQueryオブジェクトのプロトタイプにオブジェクトを格納できる=jQueryメソッドを自作できる、ということのようです。jQuery.extendは、メソッド内のオプション指定のために使用しました。引数内にオブジェクトを指定し、メソッド内で使用する値を変更できるようにすることで、メソッドの汎用性を高めることができそうです。

実際に書いたコードは以下。今回は、要素にマウスオンすることでその透過度をアニメーションで変更する、というだけの内容です。

(function($){
$.fn.hover_fade = function(option){
	$(this).each(function(){
		var	elm = $(this),
			opt = $.extend({
				spd : 250,
				opc : 0,
				eas : 'linear'
			}, option);

		elm.mouseover(function(){
			elm.stop().animate({
				opacity : opt.opc
			}, opt.spd, opt.eas);
		}).mouseleave(function(){
			elm.stop().animate({
				opacity : 1
			}, opt.spd, opt.eas);
		});
	});
};
})(jQuery);

アニメーションのスピード、透過度、イージングのタイプを引数で変更できるようにしました。

動作のサンプルはこちら
jQueryプラグイン自作の練習 - jsdo.it

なんとか無事に動作しているようです。引数にオブジェクトを指定してextendで上書きされるようにする、というのはこれまで使ったことがなかったですが、かなり便利なので、メソッド追加に多用していこうと思います。

jstarted.comはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を
獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、
Amazonアソシエイト・プログラムの参加者です。

クリエイティブ・コモンズ・ライセンス
jstarted.com by yoichi kobayashi is licensed under a Creative Commons 表示 3.0 非移植 License.