1.定义和用法
创建动画：
animate(params,[speed],[callback])
参数：
paramas：表示一个包含属性和值的映射，可以同时包含多个属性，例如{left:"200px",top:"100px"}
speed：表示动画运行的适度，参数规则同其他动画效果的speed一致，它是一个可选参数
callback：表示一个回调函数，当动画效果运行完毕后执行该回调函数，它也是一个可选参数
注意：
1.在使用animate()方法时，必须设置元素的定位属性position为relative或absolute，元素才能动起来。如果没有明确定义元素的定位属性，并试图使用animate()方法移动元素时，他们只会静止不动
2.在animate()方法中可以使用属性opacity来设置元素的透明度
3.如果在{left:"400px"}中的400px之间“+=”就表示在当前位置累加，“-=”就表示当前位置累减
停止动画：
stop()方法属于自定义动画函数，它回停止匹配元素正在运行的动画，并立即执行动画队列中的下一个动画
stop(clearQueue,gotoEnd)
参数：
clearQueue：表示是否清空尚未执行完的动画队列（值为true时，表示清空动画队列）
gotoEnd：表示是否让正在执行的动画直接到达动画结束时状态（值为true时，表示直接到达动画结束时状态）
延迟动画的执行
delay(时间)
判断元素是否处于动画状态
if(元素节点).is(":animated")){}
示例：
<body>
<div id="box1" style="background-color: #00FFFF; 70px;height: 70px;">
</div>
<button id="btn1">111111111111111111111start</button>
<button id="btn2">stop</button>
<button id="btn3">isAnimate</button>
<script type="text/javascript">
$(document).ready(function(){
var $div = $("#box1")
// 执行动画
$("#btn1").click(function(){
var a = $div.animate({left:"100px",top:"100px"},5000).delay(1000).animate({left:"200px"},5000,function(){
console.log("动画执行结束")
})
// 停止动画
$("#btn2").click(function(){
a.stop(false,false)
})
})
// 判断是否执行动画
$("#btn3").click(function(){
if($("#box1").is(":animated")){
console.log("动画中......")
}
})
})
</script>
</body>
输出：
