jQuery应用实例2：简单动画

效果：

代码：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>无标题文档</title>
 6 <script type="text/javascript " src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
 7 <style>
 8     *{padding: 0px;margin: 20px;}
 9         li{
10             width: 250px;height:300px;
11             float: left;background-color:#e60;
12             list-style: none;
13             transition:width 1s;/*<!--过渡-->*/
14         }
15         @keyframes myself{
16             0%{background:orange;}/*从0%到100%发生了什么*/
17             25%{background:red;}
18             50%{background:gray;}
19             100%{background:blue;transform:translate(100px,100px);}
20         }
21         .donghua{
22             animation:myself 3s;}
23         li:hover{
24             transform:translate(10px,10px),width:200px;}/*translate是平移，ralate是旋转*/
25 </style>
26 </head>
27     
28 <body>
29 <div>
30     <ul>
31     <li></li>
32     <li></li>
33     <li></li>
34     <li></li>
35     <li></li>
36     </ul>
37 </div>
38 
39 </body>
40 <script>
41     $(function(){
42         $("li").click(function(){
43                 var $x=$(this);
44                 var $y=$x.index();
45                 $x.addClass("donghua");
46                 //如果不移除样式，运行一遍后将没有反应，因为它们已经被赋予样式了
47                 setTimeout(function(){$x.removeClass("donghua");},3000);
48                 /*
49                 $("li").eq($y).addClass("donghua");//$x和$("li").eq($y)效果一样
50                 setTimeout(function(){$("li").eq($y).removeClass("donghua");},3000);
51                 */
52                 
53             })
54         })
55 
56 </script>
57 </html>