在JQuery中，通过使用animate()方法，可以允许用户自定义动画，制作出效果更优雅、动作更复杂的页面动画效果。
animate()方法给开发者自定义各种复杂、高级的动画提供了极大的方便和空间，其调用语法为:
animate(params,[duration],[easing],[callback])
参数params表示用于制作动画效果的属性样式和值的集合。
可选项[duration]表示三种默认的速度字符“slow”、“normal”、“fast”或自定的数字。
可选参数[easing]为动画插件使用，用于控制动画的表现效果，通常有“linear”和“swing”字符值。
可选参数[callback]为动画完成后，执行的回调函数。
PS：在动画方法animate()中，第一个参数params在表示动画属性时，需要采用“骆驼”写法，即如果是“font-size”，必须写成“fontSize”才有效，否则报错。
（1）功能描述
在页面中，单机某块<div>元素，其自身的高度和宽度以动画的效果增大。动画完成后，元素的边框加粗，并且边框颜色及<div>元素内容发生变化。
（2）实现代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style> .box{border: solid 1px #ccc;background-color: #eee;width: 100px;height: 100px;font-size: 13px;padding: 5px;} </style> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js"></script> <script> $(function(){ $(".box").click(function(){ $(this).animate({ //宽与高变化的动画效果 "20%", height:"200px" }, 3000,function(){ $(this).css({"border":"solid 4px orange"}) .html("变大了！"); }); }); }) </script> </head> <body> <div class="box"> 点击变大 </div> </body> </html>
结果如下图所示：
通过animate()方法，不仅可以用运动效果增加元素的长和宽，还能以动画效果移动页面种的元素，即改变其相对位置。
例如：
$("div").animate({
left:"20px",
top:"60px"
},3000)