<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<button id="kaishi">开始</button>
<button id="jieshu">结束</button>
<div id="box"></div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script>
$(function(){
// $('button').click(function(){
// $('#box').animate({"marginLeft":1000},2000,function(){
// $(this).animate({'marginTop':200},500)
// })
// })
$('#kaishi').click(function(){
$('#box').animate({"marginLeft":1000},2000)
$('#box').animate({'marginTop':200},500)
$('#box').delay(3000).animate({'marginLeft':0},1000) //delay(3000)延迟，隔多少秒后执行
})
$('#jieshu').click(function(){
// $('#box').stop(true) //清空动画队列
// $('#box').stop() //结束，默认为false
// $('#box').stop(true,true) //完成当前动画，把后面动画清空
$('#box').stop(false,true) //当前动画到最后一个状态，继续执行下面所有动画
})
})
</script>
</html>
