WEBOPIXEL

jQueryでマウスオーバー以外の画像(要素)をフェードアウトで透明にする

Posted: 2011.02.09 / Category: javascript / Tag: 

マウスオーバーした写真を半透明に処理は多くありますが、最近ではギャラリーページなどでマウスーバーした写真以外がフェードアウトしつつ半透明になるような処理もありますよね。
jQueryを使用すれば意外と簡単にできますのでメモしておきます。

Sponsored Link

demo

画像フェードアウト

たとえばここに何のへんてつもないリストで羅列した画像があります。

html

		<ul id="sample01">
			<li><a href="#"><img src="img/01.jpg" /></a></li>
			<li><a href="#"><img src="img/02.jpg" /></a></li>
			<li><a href="#"><img src="img/03.jpg" /></a></li>
			<li><a href="#"><img src="img/04.jpg" /></a></li>
		</ul>
	

jQueryはこうなります。

javascript

		$(function() {
			var nav = $('#sample01 li');
			nav.hover(
				function(){
					nav.not(this).stop().fadeTo(700,0.2);
				},
				function () {
					nav.not(this).stop().fadeTo(700,1);
				}
			);
		});
	

ポイントは5行目、8行目の「not(this)」ですね。
「nav.stop(),,,」と続ければ全ての画像が半透明になりますが、「not(this)」を入れることでマウスーバーされた画像を処理から外すことができます。

fadeToの引数を変更すれば透明度と透明になるまでの時間を指定することができます。

fadeTo(時間,透明度)

divをフェードアウト

画像以外ももちろんできます。
divの場合は次のようになります。

html

		<div id="sample02">
			<div>First Box</div>
			<div>Second Box</div>
			<div>Third Box</div>
			<div>Fourth Box</div>
		</div>
	

javascript

		$(function() {
			var nav = $('#sample02 div');
			nav.hover(
				function(){
					nav.not(this).stop().fadeTo(500,0.2);
				},
				function () {
					nav.not(this).stop().fadeTo(700,1);
				}
			);
		});