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

要素のホバー時に、その兄弟要素を半透明にすることで、ユーザーの視線がホバーされたものにだけ移るので、注目されやすくなります。
わりと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サンプル

sponsors

「jQueryでホバーされていない要素を半透明にする:via Using Opacity to Show Focus with jQuery」をシェアする

記事作成:
記事URL:

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