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

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

使用方法

今回はサンプルとしてメニュー的な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は考え方次第で、基本を知っているだけで印象的な表現が可能になります。