jquery动画
通过animate方法可以设置元素某属性值上的动画，可以设置一个或多个属性值，动画执行完成后会执行一个函数。
$('#div1').animate({
width:300,
height:300
},1000,swing,function(){
alert('done!');
});
参数可以写成数字表达式：
$('#div1').animate({
width:'+=100',
height:300
},1000,swing,function(){
alert('done!');
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery 动画</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
/*
参数：
1、属性设置{param1: value1, param2: value2}
2、speed 时间 ms
3、swing 默认值 开始和结束慢速，中间快速 linear 匀速
4、回调函数
*/
$('#div1').animate({width:200,height:200},1000,function(){
alert('动画完了！');
$(this).animate({marginLeft:500},1000,function(){
$(this).animate({marginTop:500},1000);
});
});
})
</script>
<style type="text/css">
.box{
width:100px;
height:100px;
background-color: gold;
}
</style>
</head>
<body>
<div id="div1" class="box"></div>
</body>
</html>