使用jquery制作背景变化菜单

jquery动画函数animate是不支持背景移动动画的，即无法对backgroundPosition进行处理，需要使用一个插件，这个插件名为jquery.backgroundPosition，接下来将使用这个插件，制作一个背景变化的菜单。

制作过程

1、创建如下html菜单结构

1. <ul>
2.                 <li><a href="http://www.36ria.com/">首页</a></li>
3.                 <li><a href="http://www.36ria.com/">关于作者</a></li>
4.                 <li><a href="http://www.36ria.com/">联系作者</a></li>
5.             </ul>

2、加上css样式

1. ul {list-style:none;margin:0;padding:0;}
2. li {float:left;100px;margin:0;padding:0;text-align:center;font-size:14px;}
3. li a {display:block;padding:5px 10px;height:100%;color:#FFF;text-decoration:none;border-right:1px solid #FFF;}
4. li a {background:url(../images/bg2.jpg) repeat 0 0;}
5. li a:hover, li a:focus, li a:active {background-position:-150px 0;}

示例中有5个demo，共用了四张背景图片：




分别对应相应的动画demo样式：

1. #a a {background:url(../images/bg.jpg) repeat -20px 35px;}
2. #b a {background:url(../images/bg2.jpg) repeat 0 0;}
3. #c a {background:url(../images/bg3.jpg) repeat 0 0;}
4. #d a {background:url(../images/bg4.jpg) repeat 0 0;}

3、javascript脚本

引入jquery库和jquery.backgroundPosition：

1. <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
2. <script type="text/javascript" src="js/jquery.backgroundPosition.js"></script>

1. $(function(){
2.     $('#a a')
3.         .css( {backgroundPosition: "-20px 35px"} )
4.         .mouseover(function(){
5.             $(this).stop().animate({backgroundPosition:"(-20px 94px)"}, {duration:500})
6.         })
7.         .mouseout(function(){
8.             $(this).stop().animate({backgroundPosition:"(40px 35px)"}, {duration:200, complete:function(){
9.                 $(this).css({backgroundPosition: "-20px 35px"})
10.             }})
11.         })
12.     $('#b a')
13.         .css( {backgroundPosition: "0 0"} )
14.         .mouseover(function(){
15.             $(this).stop().animate({backgroundPosition:"(-150px 0)"}, {duration:500})
16.         })
17.         .mouseout(function(){
18.             $(this).stop().animate({backgroundPosition:"(-300px 0)"}, {duration:200, complete:function(){
19.                 $(this).css({backgroundPosition: "0 0"})
20.             }})
21.         })
22.     $('#c a')
23.         .css( {backgroundPosition: "0 0"} )
24.         .mouseover(function(){
25.             $(this).stop().animate({backgroundPosition:"(0 -250px)"}, {duration:500})
26.         })
27.         .mouseout(function(){
28.             $(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500})
29.         })
30.     $('#d a')
31.         .css( {backgroundPosition: "0 0"} )
32.         .mouseover(function(){
33.             $(this).stop().animate({backgroundPosition:"(0 -250px)"}, {duration:500})
34.         })
35.         .mouseout(function(){
36.             $(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500})
37.         })
38. });

引入jquery.backgroundPosition后animate()开始支持backgroundPosition背景位移动画。后二个颜色渐变的例子，也是通过渐变背景图片上下移动产生的。