POPSブログ

jQuery hover() アクション/2

153

  Category:  jquery2012/10/20 pops 

jQueryメソッド hover(over,out) を使用して、2枚の画像を重ねクロスフエードで変化させます。

 

jQuery hover() アクション 2

画像のロールオーバーアクションについて、手軽なjQuery APIのメソッド hover(over,out) を使用してみます。2枚の画像を重ねクロスフエードで変化させますからキレイです。


2枚画像を重ね、1枚をフエードイン、アウトで変化させるサンプル


下の画像を「HOVER」ください。画像をクロスフエードで変化させます。


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





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



li リストの中のブロックは、span要素にしても良いが、div要素の方が扱いやすい。


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


HTML JS CSS について


HTML

DIV要素で全体を囲み、A要素にクラスをあたえます。複数個あってもOKです。


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

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


JS

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



(function($){
	$(function(){
		$(".imagehover2").each(function(){
			$(this).hover(
				function () {
					//over
					$(this).children('img').next().fadeTo(400,0);
				},
				function () {
					//out
					$(this).children('img').next().fadeTo(400,1);
				}
			);
		});
	});
})(jQuery);

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

fadeIn fadeOut を使用するより fadeTo だけのほうが簡単。


2番めの画像を変化させている、、書き方いろいろ。


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

インデックスで制御するときは
2番めはeq(1)であるから
$(this).find('img').eq(1) などとする


CSS

ここでのCSS例です、環境に合わせて変えてください。DIV要素の中にA要素に2つのIMG要素が入っている構造です。
基本的に、DIV要素を position:relative で位置を固定、2つのIMG要素を position:absolute で同じところで重なるようにします。


テーブルの中に配置

.sample2 {height:110px;}
.sample2,.sample2 tr,.sample2 td {
border:0;
}
.sample2 div{
display:block;
position:relative;
width:100px;
height:100px;
margin:0 auto;
overflow:hidden;
}
.imagehover2 {
width:100px;
height:100px;
}
.imagehover2 img {
position:absolute;
top:0;left:0;
width:100px;
height:100px;
}

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

#sample-ul2 {
display:block;
width:auto;
height:110px;
}
#sample-ul2 li{
display:inline-block;
margin-left:50px;
float:left;
}
#sample-ul2 li div{
display:block;
position:relative;
width:100px;
height:100px;
overflow:hidden;
}
#sample-ul2 li .imagehover2 {
width:100px;
height:100px;
}
.imagehover2 img {
position:absolute;
top:0;left:0;
width:100px;
height:100px;
}

テーブルの場合に「全て中央」に表示するには、全体に(又はDIV要素の親要素) text-align:center を与え、DIV要素 にmargin:0 auto が基本になります。上記のCSSはここでの例ですので実際には、旨く調整ください。
現実には単独で使用するのではなく、上記サンプルのように複数の画像を並べる場合が多いとおもいます。


addClass方式の場合

その都度、クラスを与えてCSSのみで制御する場合の記述例。CSSは任意になります。現在クラス名hoverを与えていますが自由な名前を記述可能です。
CSS3ならばクロスフエードにすることも可能でしょう。ここでは省略します。



前後略す
	function () {
	//over
	$(this).children('img').next().addClass("hover");
	},
	function () {
	//out
	$(this).children('img').next().removeClass("hover");
	}

each()を省いた記述

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



(function($){
	$(function(){
		$(".imagehover2").hover(
			function () {
				//over
				$(this).children('img').next().fadeTo(400,0);
			},
			function () {
				//out
				$(this).children('img').next().fadeTo(400,1);
			}
		);
	});
})(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]