POPSブログ

jQuery hover() アクション/1

152

  Category:  jquery2012/10/19 pops 

jQueryメソッド hover(over,out) を使用して色々な画像のロールオーバーなどを表現してみます。

 

jQuery hover() アクション 1

画像のロールオーバーアクションについて、手軽なjQuery APIのメソッド hover(over,out) を使用してみます。はじめは1枚画像のみで透明化して変化をつけます。画像が2枚いらない分手間がはぶけます。


1枚画像のみで透明度を変化させるサンプル


下の画像を「HOVER」ください。画像を変化させます。


1. テーブルの中に配置の例





2. li リストの中に配置の例



但し、WINDOWS 7 で Chrome を使用した場合、画像が左右に1ピクセル動くようです。(その外は正常です)


サンプルとスクリプトの簡単な説明


HTML JS CSS について


HTML

A要素にクラスをあたえます。複数個あってもOKです。


<a class="imagehover" href="リンクURL"><img src="画像URL" width="画像幅" height="画像高さ" /></a>

クラス imagehover を変更の場合は、下のJS先頭部分 $(".imagehover"). も変えてください。


JS

hover-test1.js、(簡易記述、読み込んだら実行します)



(function($){
	$(function(){
		$(".imagehover").each(function(){
			$(this).children('img').fadeTo(10,0.5);
			$(this).hover(
				function () {
					//over
					$(this).children('img').fadeTo(200,1);
				},
				function () {
					//out
					$(this).children('img').fadeTo(200,0.5);
				}
			);
		});
	});
})(jQuery);

透明度の変化は fadeTo を使用して、jQuery任せにした方が簡単。背景色を変えれば画像の雰囲気も変わる。

透明度の変化が反対でも面白みがある。画像が1枚ですむので、私は結構利用しています。


構造を変えた場合などは、、


現在は1地番めに画像があるので
$(this).children('img'). としている

階層が深い場合は
$(this).find('img'). で反応するはず


CSS

ここでのCSS例です、環境に合わせて変えてください。A要素に直接では無く、DIV要素にいれたほうがCSSは簡単とおもいます。
A要素に背景色を与えない場合は、A要素のCSSは省略できる。


テーブルの中に配置

.sample,.sample tr,.sample td {
	border:0;
}
.sample a {
	display:inline-block;
	width:100px;
	height:100px;
	background-color:#000000;
}
.imagehover img {
	width:100px;
	height:100px;
}

----------------------------------------------
liリストの中に配置

#sample-ul {
	width:auto;
	height:110px;
}
#sample-ul li{
	display:inline;
	margin-left:50px;
	float:left;
}

.sample a {
	display:inline-block;
	width:100px;
	height:100px;
	background-color:#000000;
}
.imagehover img {
	width:100px;
	height:100px;
}


addClass方式の場合

その都度、クラスを与えてCSSのみで制御する場合の記述例。CSSは任意になります。現在クラス名hoverを与えていますが自由な名前を記述可能です。



(function($){
	$(function(){
		$(".imagehover").each(function(){

			$(this).hover(
				function () {
					//over
					$(this).addClass("hover");
				},
				function () {
					//out
					$(this).removeClass("hover");
				}
			);
		});
	});
})(jQuery);


each()を省いた記述

クラスに対してのアクション設定ですから、下記のように each() を省いた記述もできます。但し複雑な処理を書くと意図した動きにならない事もあります。
私の場合、その時の処理状態に応じて each() を入れたりしています。


(function($){
	$(function(){
		$(".imagehover").children('img').fadeTo(10,0.5);
		$(".imagehover").hover(
			function () {
				//over
				$(this).children('img').fadeTo(200,1);
			},
			function () {
				//out
				$(this).children('img').fadeTo(200,0.5);
			}
		);
	});
})(jQuery);


簡単ですが、以上です。

 


[ この記事のURL ]


タグ:jquery , Effect , series

[ jQuery hover() アクション シリーズ記事 ]

jQuery hover() アクション/72012.10.25
jQuery hover() アクション/62012.10.24
jQuery hover() アクション/52012.10.23
jQuery hover() アクション/42012.10.22
jQuery hover() アクション/32012.10.21
jQuery hover() アクション/22012.10.20
jQuery hover() アクション/12012.10.19

 

ブログ記事一覧



[1]