JQ动画作业2
隐藏，显示，淡入淡出等相对简单，平时也经常用，就没做案例，主要掌握animate()与stop的使用方法
<!doctype html>
<html>
<head>
<meta charset="gbk">
<title>JQ动画作业</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<style>
.box{width:100px;height:100px;background:#ccc;position:absolute}
</style>
<script>
$(function(){
$('button').click(function(){
$('.box').animate({left:"400px",width:'200px',height:'200px',background:'#f00',opacity:'0.3'},1500,function(){
alert('DIV变大变透明啦');
});
})
$('#stop').click(function(){
$('.box').stop(true)
})
$('#finish').click(function(){
$('.box').stop(true,true)
})
})
</script>
<body>
<button>移动DIV</button><button id='stop'>停止</button><button id='finish'>立即结束</button>
<div></div>
</body>
</html>