1. <html>  
2. <head>  
3. <meta http-equiv="Content-Type""text/html; charset=gb2312" />  
4. <title>JQuery实现背景图片渐变</title>  
5. <script type="text/javascript""jquery.js""jquery.js"></script>  
6. <script type="text/javascript">  
7. function(){  
8. "#sub").css("left",$("#super").offset().left);  
9. "#sub").css("top", $("#super").offset().top);  
10.           
11. "#super").css("background-image","url(img_01.jpg)");  
12. "#sub").css("background-image","url(img_02.jpg)");  
13. '#sub').css('opacity', 0);   
14.           
15. "#sub").hover(  
16. function() {  
17. "#super").stop().animate({opacity: '0'},500);  
18. "#sub").stop().animate({opacity: '1'},500);  
19.             },   
20. function() {  
21. "#sub").stop().animate({opacity: '0'},500);  
22. "#super").stop().animate({opacity: '1'},500);  
23.             });  
24.         }  
25.     );   
26. </script>  
27. <style>  
28. #super{  
29.     width:900px;  
30.     height:400px;  
31. }  
32. #sub {  
33.     width:900px;  
34.     height:400px;  
35.     position:absolute;  
36. }  
37. </style>  
38. </head>  
39.   
40. <body>  
41. <div id="super"></div><div id="sub"></div>  
42. </body>  
43. </html>  
44. 
45. 
46. 简单注释：
    背景渐变切换，首先要准备两个div标签，主要，这两个标签一个是主要div，一个用来掩盖原来背景的div，因此第二个div的position属性应该设置为：absolute；
    在Jquery代码里面，
    1.设定第二个div与第一个div重合；
    2.分别给两个div赋上背景图片，并设第二个div的透明属性为0，即：完全透明；
    3.在第二个div加上hover函数，分别对两个div进行渐变操作；47. 
48. 
49. 
50. 
51. 
52.