最近在学习jQuery，看到一个很有意思的函数animate()，但是在网上却没有查到相关的详细资料，于是打算参考jQuery API，自己总结一下。
概述
animate() 方法执行 CSS 属性集的自定义动画。该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。
用法一
$(selector).animate({styles},speed,easing,callback) //创建自定义动画
styles: 必需，定义形成动画的css属性。需要使用驼峰法书写所有的属性名，如paddingLeft而不是padding-left。也可以定义相对值，即相对于元素当前值做改变。需要在指的前面加上 +=或者-=。还可以使用预定义值，属性的动画值设置为 show/hide/toggle。
speed: 可选，定义效果的时长。可取值slow、normal(默认)、fast 或者毫秒数。
easiing: 可选，定义在不同动画点中设置动画速度。内置的easing函数有：swing（缓冲，默认值）、linear（匀速），可通过js文件扩展。
callback:可选，定义在动画完成后所执行的函数名称。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>自定义动画animate()</title> 6 <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script> 7 </head> 8 <script type="text/javascript"> 9 $(document).ready(function(){ 10 $('button').click(function(){ 11 $('div').animate({ 12 height:"300px", 13 width:"+=100px", // 相对值 14 //:"width":"hide" //预定义值 15 }, 16 "slow", 17 "linear", 18 function(){ 19 alert("高度为："+ $("div").height()) 20 }); 21 }); 22 }) 23 24 </script> 25 26 <body> 27 <button>开始动画</button> 28 <!-- 默认所有的HTML 元素都有一个静态位置，且无法移动。如需要对位置进行操作，要先把元素的position属性 --> 29 <div style="background:red;height:100px;width:100px;position:absolute;"> 30 </div> 31 32 </body> 33 </html>
用法二
$(selector).animate({styles},{options})
styles: 必需，定义形成动画的css属性。用法同上
optins: 可选，定义动画的额外选项。
可能的值有：
speed：设置动画的速度。
easing：定义要使用的easing函数。
callback:定义动画完成后要执行的函数。
step：定义动画的每一步完成后要执行的函数。
queue：布尔值，指示是否在效果队列中放置动画。如果为false，则动画将立即开始。
specialEasing：定义styles参数的一个或多个 CSS 属性的映射，以及他们对应的 easing 函数。
其他几个与上面的用法类似，主要来看看 step 和 queue 。
默认地，jQuery 提供针对动画的队列功能。这意味着如果编写多个 animate() 调用，jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>自定义动画animate()</title> 6 <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script> 7 </head> 8 <style type="text/css"> 9 div { 10 background-color: #bca; 11 width: 200px; 12 height: 1.1em; 13 text-align: center; 14 border: 2px solid green; 15 margin: 3px; 16 font-size: 14px; 17 } 18 </style> 19 <script type="text/javascript"> 20 $(document).ready(function(){ 21 $('#first').click(function(){ 22 // 默认地，动画会依次执行 23 $('#div1').animate({height:"200px"}) 24 .animate({width:"+=100px"},"slow") 25 .animate({fontSize:"50px"},"slow"); 26 }); 27 $('#second').click(function(){ 28 // 第一个动画不在队列中，则前两个一起执行 29 $('#div2').animate({height:"200px"},{queue:false}) 30 .animate({width:"+=100px"},"slow") 31 .animate({fontSize:"50px"},"slow"); 32 }); 33 }); 34 </script> 35 36 37 <body> 38 <button id="first">div1</button> 39 <button id="second">div2</button> 40 <div id="div1">div1</div> 41 <div id="div2">div2</div> 42 </body> 43 </html>
未完待续。。。