jQuery提供animate()方法来创建动画。

animate()方法动画原理：改变CSS属性来影响元素行为。目前仅仅能修改属性值为数值的属性，如height weight font-size等，属性值为字符串的属性不能改。

更重要的是：在animate()方法中，属性名采用caml命令，不能使用-，如border-bottom，要写成borderBottom，将中间的-去掉，第二个单词首字母大写。

语法形式：

1
2
3
animate({
   //要改变的CSS
}[,speed][,easing][,complete]);

animate()的参数有几部分，CCS部分，用花括号括起来。在花括号后面还有3个可选参数。

speed参数表示动画持续时间，单位是毫秒。1秒=1000毫秒。

easing参数，可以选择两个，一个是linear，表示动画速度是线性的，另一个是swing，表示动画过程快，开始和结尾慢。

complete参数，表示动画结束时需要调用的函数——回调函数。事件本质是函数，是回调函数。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS动画</title>
        </script>   
        <style>
            li{
                max-width: 200px;
                
                color: #fff;
            }
        </style>
    </head>
    <body>
        <div>
            <ul id="ul">
                <li id="a">鼠标</li>
                <li id="b">键盘</li>
                <li id="c">屏幕</li>
                <li id="d"><a>主机</a></li>
            </ul>
        </div>
        <script>
            $(function () {
               var $li=$("li");
               // 淡入
               $li.hide().each(function(index){
                   $(this).delay(650*index).fadeIn(700);
               });
               // CSS 动画
               $li.on("click",function(){
                  // $(this).fadeOut(700);
                  $(this).animate({
                      opcity:0.0,
                      paddingLeft:'+=80'
                  },500,function(){
                      $(this).remove();
                  });
               });
            });
        </script>
    </body>
</html>