skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

jQueryでホバーされていない要素を半透明にする：via Using Opacity to Show Focus with jQuery

｜ ｜ ｜ ｜ ｜ ｜ ｜

要素のホバー時に、その兄弟要素を半透明にすることで、ユーザーの視線がホバーされたものにだけ移るので、注目されやすくなります。
わりとjQueryの初歩的な使い方かもしれませんが、備忘録的に紹介します。
via：Using Opacity to Show Focus with jQuery

使用方法
たとえば以下のようなメニューがあったとします。
<ul id="menu">
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
<li>menu 4</li>
</ul>

「menu 1」にマウスオーバーされた際に、ほかの2-4が半透明になるイメージです。
まずはjQueryからjquery.jsをダウンロードします。
その後、以下のようなscriptを記述します。
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#menu').children().hover(function() { //#menuの子要素にマウスオーバーした時の処理
$(this).siblings() //その要素の兄弟要素をすべて取ってきて
.stop().fadeTo(500,0.5); //500ミリ秒かけて、opacity0.5まで変化させます
}, function() { //マウスアウトの処理
$(this).siblings()
.stop().fadeTo(500,1); //戻します
});
});
</script>

上記で完成です。

jQueryでホバーされていない要素を半透明にする：via Using Opacity to Show Focus with jQueryサンプル

記事作成：2009年09月02日

前の記事：jQueryで自動ドアが開くような表示をさせるJavaScript「Image splitting effect with CSS and JQuery」
次の記事：jQueryで斜めにもスライドさせる：via　jQuery faux-3D Viewport