jQueryでマウスオーバーを印象的にする:jQuery Animated Menu

マウスオーバー時に効果を与えることは当たり前になっていますが、もうちょっと工夫をするとユーザーの興味を喚起できるかもしれません。
jQueryの.hoverという基本的な手法を利用して、マウスオーバーを印象的にする小ネタです。
via:jQuery Animated Menu

sponsors

使用方法

今回はサンプルとしてメニュー的なhtmlを記述してみます。

<ul id="menu">
    	<li class="home"><a href="#">home</a></li>
</ul>
CSSは以下とします。

ul#menu {height:81px;margin:0;padding:0;}
ul#menu li a {display:block;height:81px;width:159px;text-indent:-9999px;}
ul#menu li.home {background:url(menu.jpg) no-repeat;}
ul#menu li.home a {background:url(menu.jpg) 0px -81px;}
上記のようなhtml、cssがあったとき、以下のようにscriptを記述します。
jQueryからjquery.jsをダウロードします。

<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$(function() { 
		$("ul#menu li a").css("opacity","0");
		//初期設定として画像のopacityを0にします。
		$("ul#menu li a").hover( //hoverです。
			function () {
				$(this).stop().animate({opacity: 1}, 'slow');},
				//マウスオーバー時にopacityを1にします。
			function () {
				$(this).stop().animate({opacity: 0}, 'slow');}
				//マウスアウト時にopacityを0に戻します。
		);
	});
});
</script>
これで初期opacityが0としたul#menu li.home a {background:url(menu.jpg) 0px -81px;}がホバー時に乗ってくることになります。
このようにjQueryは考え方次第で、基本を知っているだけで印象的な表現が可能になります。

サンプル

sponsors

Javascriptサンプルページ一覧
skuare.net