<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1 {
width: 100px;
height: 100px;
background: red;
position: relative;
}
</style>
<script src="js/jquery-3.1.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
$('button').click(function() {
//自定义动画
//让宽度变为500
//animate (参数一,参数二)
参数一:是一个对象，对象中包裹的是要产生动画效果的属性名以及属性如果参数一中添加了多个属性,则这些属性是同时发生改变的 (复杂动画)
如果把参数一中的多个属性拆分到不同的animate方法中添加的话,则在执行完上一annmate方法后,才能执行下一个方法，顺序执行。
参数二:一个数值或关键字字符串，用来控制时间
第三个参数是一个回调函数，当动画执行完毕后，会执行回调函数，我们一般会把动画结束后的操作放在这个回调函数中
链式操作 :通过点语法用来连接多不操作
$('#div1').animate({width:'500px'},3000).animate({height:'500px'},3000)
$('#div1').animate({
left: '500px',
borderRadius: '50%',
width: '500px',
height: '500px'
}, 3000, function() {
$(this).css({
'background': 'gold'
});
});
});
});
</script>
</head>
<body>
<div id="div1"></div>
<button>点击产生动画</button>
</body>
</html>
