jQueryでメニューのマウスオーバーをかっちょよくするJavaScript「jQuery Background Position」

かっちょよくシリーズ第2弾。。。
jQueryを使用してメニューのマウスオーバーを印象的にしてみます。
via:jQuery Background Position

sponsors

使用方法

jQuery Background Positionからjquery.bgpos.jsをjQueryからjquery.jsをダウロードします。
次にこんな画像を用意します。

次に以下のようにjsを記述します。

<style>	
ul {list-style:none;margin:0;padding:0;}
li {float:left;width:100px;line-height:25px;height:25px;margin:0;padding:0;text-align:center;}
li a {background:url(背景画像パス) repeat 0 0;display:block;padding:5px 10px;color:#FFF;text-decoration:none;border-right:1px solid #FFF;}
</style>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.bgpos.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('li a')
		.css( {backgroundPosition: "-20px 35px"} ) //デフォルト時、背景画像を横-20px、縦35pxに指定。
		.mouseover(function(){
			$(this).stop().animate({backgroundPosition:"(-20px 94px)"}, {duration:500})
			//マウスオーバー時に縦位置94pxに0.5秒かけて移動
		})
		.mouseout(function(){
			$(this).stop().animate({backgroundPosition:"(40px 35px)"}, {duration:200, complete:function(){
			//マウスアウト時に横位置40px、縦位置35pxに2秒かけて移動
				$(this).css({backgroundPosition: "-20px 35px"})
				//移動完了後、元の位置に戻す
			}})
	})
});
</script>
最後にメニュー部分を一般的な方法で記述します。

<ul id="demo">
	<li><a href="#">Home</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Contact</a></li>
</ul>

サンプル

sponsors

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