jQueryを使った滑らかにアニメーションするメニュー[js]

ShopDevより、jQueryを使った滑らかにアニメーションするメニューの紹介です。

デモページはこちらから

ホバー効果をだすための画像をダウンロードし、設置方法は下記のソースのようになります。

HTML

<ul id="menu">
	<li><a href="#" class="home"><span></span></a></li>
	<li><a href="#" class="portfolio"><span></span></a></li>
</ul>

CSS

ul#menu li a {
	background:url(sprite.png) no-repeat scroll top left;
	display:block;
	height:81px;
	position:relative;
}

ul#menu li a.home span {
	background-position:0px -81px;
}

ul#menu li a.portfolio span {
	background-position:-159px -81px;

JavaScript

$(function() {
		$("ul#menu span").css("opacity","0");
		$("ul#menu span").hover(function () {
			$(this).stop().animate({
				opacity: 1
			}, "slow");
		},

		function () {
			// animate opacity to nill
			$(this).stop().animate({
				opacity: 0
			}, "slow");
		});
});