[ jquery 效果 animate(opation[speed,[easing],[fn]]) ] 此方法用于通过自定义调整目标的变化至指定目标来实现所有匹配元素的效果，并在动画完成后可选地触发一个回调函数
params,[speed],[easing],[fn]
params:一组包含作为动画属性和终值的样式属性和及其值的集合
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".
fn:在动画完成时执行的函数，每个元素执行一次。
params,options
params:一组包含作为动画属性和终值的样式属性和及其值的集合
options:动画的额外选项。如：speed - 设置动画的速度,easing - 规定要使用的 easing 函数,callback - 规定动画完成之后要执行的函数,step - 规定动画的每一步完成之后要执行的函数,queue - 布尔值。指示是否在效果队列中放置动画。如果为 false，则动画将立即开始,specialEasing - 来自styles 参数的一个或多个 CSS 属性的映射，以及它们的对应 easing 函数
实例:
<html lang='zh-cn'>
<head>
<title>Insert you title</title>
<meta http-equiv='description' content='this is my page'>
<meta http-equiv='keywords' content='keyword1,keyword2,keyword3'>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type='text/javascript' src='./js/jquery-1.12.1.min.js'></script>
<style type="text/css">
*{margin:0;padding:0;}
html{font:400 15px/1.2em 'Courier New';color:#666;width:750px;margin:25px auto;}
#show{width:250px;height:400px;background:red;/*display:none;*/color:#FFF;line-height:400px;text-indent:8px;padding:10px 30px;margin:70px;position:absolute;left:0;top:0;text-align:center;}
button{padding:8px;border:0;outline:none;background:#00E92C;border-radius:2px;}
.wrapAll{color:#FF96EC;}
</style>
<script type='text/javascript'>
$(function(){
$('button').click(function(){
/*
对于animate实现自定义动画来讲,里面设定的目标值只能为数值,不能为其他,即使使用rgba()来改变背景色也是无效的
*/
$('#show').animate({'left':'300','top':'200',},1000,'swing',function(){
console.log('animate is already finished...');
});
});
});
</script>
</head>
<body>
<div id='demo'>
<button type="button">button</button>
<div id='show'>Test text</div>
</div>
</body>
</html>
