该实例利用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动画背景导航菜单源码下载|共21.97 kB|已下载(38)次