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- 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> |