用jQuery制作动画背景导航菜单 [转]

该实例利用jQuery效果animate() 方法改变CSS背景定位属性实现动画效果,CSS背景属性值是逐渐改变的,这样视觉上就达到动画效果。

在写入这样的无序列表:

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

定义下面的CSS样式:

ul {
	list-style:none;
	margin:0;
	padding:0;
}
li {
	float:left;
	width:100px;
	margin:0;
	padding:0;
	text-align:center;
}
li a {
	display:block;
	padding:5px 10px;
	height:100%;
	color:#FFF;
	text-decoration:none;
	border-right:1px solid #FFF;
}
li a {
	background:url(bg.jpg) repeat 0 0;
}
li a:hover {
	background-position:50px 0;
}

下面是实现效果的核心jQuery代码:

$('#nav a')
	.css( {backgroundPosition: "0 0"} )
	.mouseover(function(){
		$(this).stop().animate(
			{backgroundPosition:"(0 -250px)"},
			{duration:500})
		})
	.mouseout(function(){
		$(this).stop().animate(
			{backgroundPosition:"(0 0)"},
			{duration:500})
		})

jQuery动画背景导航条源码下载jQuery动画背景导航条源码下载

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注


*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>