<!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>