优点：
1、可以知道动画结束的表示（结束的回调函数）
2、可以利用jq动画插件完成复杂的动画
动画有三个参数：动画的样式是字典、动画持续的事件，动画结束回调函数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jq动画</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: orange;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
<script src="js/jq.js"></script>
<script>
//鼠标点击切换回圆，鼠标离开恢复，通过两个事件来完成
//动画有三个参数：动画的样式是字典、动画持续的事件，动画结束回调函数
$('.box').click(function () {
//点击变成圆
$(this).animate({
borderRadius:'50%' //这里还可以安装jq的插件，就是直接调用jq的插件，也可以自定意义插件
},100,function () {
console.log('我是动画结束的标识')
}) //1秒就是1000
});
$('.box').mouseout(function () {
//鼠标移走恢复原样
$(this).animate({
borderRadius:'0'
},100,function () {
console.log('我是动画恢复的标识')
}) //1秒就是1000
}) </script>
</html>
