jquery中的事件与动画

光棒效果:
 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 2 "http://www.w3.org/TR/html4/loose.dtd">
 3 <html xmlns="http://www.w3.org/1999/xhtml">
 4     <head>
 5         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 6         <title>New Web Project</title>
 7         <style type="text/css">
 8             .heightlight{
 9                 background-color:red;
10             }
11         </style>
12         <script type="text/javascript" src="js/jQuery1.11.1.js"></script>
13         <script type="text/javascript">
14             $(document).ready(function(){
15                 $("#nav li").mouseover(function(){    //当鼠标指针移过#nav li 元素时
16                     $(this).addClass("heightlight");  //当鼠标指针所在li元素添加样式
17                 });
18                 $("#nav li").mouseout(function(){     //当鼠标指针移出#nav li 元素时
19                     $(this).removeClass();       //移除鼠标指针所在li元素的全部样式
20                 });
21             });
22             
23         </script>
24     </head>
25     <body>
26         <div id="nav">
27             <li><a href="#">首页</a></li>
28             <li><a href="#">服装城</a></li>
29             <li><a href="#">电器城</a></li>
30             <li><a href="#">易购超市</a></li>
31             <li><a href="#">易购团</a></li>
32             <li><a href="#">在线游戏</a></li>
33             
34         </div>
35     </body>
36 </html>
执行结果: