[jQ]用 jQuery 做選單 – 彈起式頁籤選單

#menu {
	margin: 20px 0 0;
	padding: 0;
	height: 62px;		/* 選單圖片的高 */
	list-style: none;
	overflow: hidden;
	width: 432px;		/* 98 * 4 + 5 * 8 */
	border-bottom: 1px solid #ccc;
}
#menu li {
	float: left;
	padding: 0 5px;
}
#menu li a {
	display: block;
	width: 98px;		/* 選單圖片的寬 */
	height: 62px;		/* 選單圖片的高 */
	line-height: 62px;	/* ie suck */
	text-indent: -9999px;
	margin-top: 31px;	/* 需要設定為圖片寬/2 */
	background-repeat: no-repeat;
}
/*
#menu li a:hover {
	margin-top: 1px;	// 當滑鼠移到選單上時...
}
*/
/* 幫每一個 A 連結都加入不同選單圖片 */
.home {background:url(home.gif);}
.car {background:url(car.gif);}
.good {background:url(good.gif);}
.query {background:url(query.gif);}

$(function(){
	// 幫 A 連結加上 hover() 事件
	$("#menu li a").hover(function(){	// 當滑鼠移進時..
		// 先停止未完成的動畫再進行新的動畫
		// 變更 margin-top
		$(this).stop().animate({
			marginTop: 1
		}, 200);
	}, function(){	// 當滑鼠移出時..
		// 先停止未完成的動畫再進行新的動畫
		// 變更 margin-top
		$(this).stop().animate({
			marginTop: 31
		}, 200);
	}).focus(function(){	// 當 A 連結取得焦點時..
		// 讓本身失去焦點
		$(this).blur();
	});
});

$(function(){
	// 幫 A 連結加上 hover() 事件
	$("#menu li a").hover(function(){	// 當滑鼠移進時..
		// 先停止未完成的動畫再進行新的動畫
		// 變更 margin-top
		$(this).stop().animate({
			marginTop: 1
		}, 200);
	}, function(){	// 當滑鼠移出時..
		// 先停止未完成的動畫再進行新的動畫
		// 變更 margin-top
		// 動畫效果加上 easeOutBounce
		$(this).stop().animate({
			marginTop: 31
		}, 200, "easeOutBounce");
	}).focus(function(){	// 當 A 連結取得焦點時..
		// 讓本身失去焦點
		$(this).blur();
	});
});