1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 
 5     <title></title>
 6     <script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
 7 </head>
 8 <style>
 9     .gg{
10         height: 50px;
11         width: 160px;
12         border: 1px solid #999;
13         color: #000000;
14         position: relative;
15         text-align: center;
16     }
17     .jj{
18         height: 50px;
19         width: 0;
20         background-color: #999;
21         position: absolute;
22         text-align: center;
23         overflow: hidden;
24     }
25     .text{
26         height: 50px;
27         width: 160px;
28         color: #ffffff;
29         text-align: center;
30         overflow: hidden;
31     }
32 </style>
33 <script>
34 $(document).ready(function(){
35     var bb;//定义一下bb，就是鼠标离开的定时触发缩小的事件变量，防止鼠标经过时清除事件出错
36 $(".gg").mouseover(function(){
37     //alert(5)i
38     clearInterval(bb);//清除bb，防止黑色背景条还在变小，造成一闪闪的现象
39     i=$(".jj").width();//获取背景条宽度，从这个宽度开始变大
40         aa=setInterval(function(){
41             i+=2;//自增
42             $(".jj").css("width",i);//赋值给宽度
43             if (i>=160) {//达到最大宽度，停止变大
44                 clearInterval(aa);//清除setInterval
45             }
46         },3);//毫秒变一次，每次增大量就是上面的自增i
47     });
48 $(".gg").mouseout(function(){
49      //var i=1;
50      //j
51      j=$(".jj").width();//获取背景条宽度，从这个宽度开始变小
52      clearInterval(aa);
53         bb=setInterval(function(){
54             j-=2;
55             $(".jj").css("width",j);
56             if (j<=0) {
57 
58                 clearInterval(bb);
59             }
60         },3);
61 })
62 })
63     </script>
64 <body>
65 <div class="gg">
66     <div class="jj"><div class="text">nimeide</div></div>
67 nimeide 
68 </div>
69 </body>
70 </html>