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

画像フェードアウト

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

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);
				}
			);
		});