1、.delay().animate();
2、回调函数
3、setTimeout
我爱模板网在这里简单的一一举例，有不当之处还希望各位大神指教：
首先，我们先写四个div，让他们从上下左右进入父容器：
<html>
<head>
<meta charset="utf-8" />
<title>动画依次执行 我爱模板网 5.jimth.com</title>
<script src="https://5.jimth.com/download/jquery/jquery-1.8.3.min.js"></script>
<script>
$(function(){
var box = $("#box");
var box_t = $("#box_t");
var box_r = $("#box_r");
var box_b = $("#box_b");
var box_l = $("#box_l");
box_t.animate({"top":"50px"},1000);
box_r.animate({"right":"50px"},1000);
box_b.animate({"bottom":"50px"},1000);
box_l.animate({"left":"50px"},1000);
})
</script>
</head>
<body>
<style>
#box{width:500px; height: 300px; border: 1px solid #000; margin:100px auto; position: relative;}
#box div{width:100px; text-align: center; height:30px; line-height:30px; position: absolute;}
#box_t{background: #b41717; left:200px; top:-50px;}
#box_r{background: #b47e17; right:-150px; top:120px;}
#box_b{background: #29b417; left:200px; bottom:-50px;}
#box_l{background: #176cb4; left:-150px; top:120px;}
</style>
<div id="box">
<div id="box_t">上</div>
<div id="box_r">右</div>
<div id="box_b">下</div>
<div id="box_l">左</div>
</div>
</body>
</html>
一、delay()方法：
这是jquery封装的一个方法，可以延时执行，放在animate动画前面，在delay的参数里面设置延时时间，比如，第一个是500，即500毫秒以后执行，如果加上执行动画的时间1000毫秒，那么第二个就设置1500毫秒，以此类推，即可实现。修改上面的jquery代码：
box_t.delay(500).animate({"top":"50px"},1000);
box_r.delay(1500).animate({"right":"50px"},1000);
box_b.delay(2500).animate({"bottom":"50px"},1000);
box_l.delay(3500).animate({"left":"50px"},1000);
二、回调函数，即，animate执行完毕后可以调用回调函数：
当第一个动画执行完毕，再调用第二个动画的函数，第二个动画执行完毕，再调用第三个，以此类推。修改上面的jquery代码如下：
box_t.animate({"top":"50px"},1000,box_r_animate);
function box_r_animate(){
box_r.animate({"right":"50px"},1000,box_b_animate);
}
function box_b_animate(){
box_b.animate({"bottom":"50px"},1000,box_l_animate);
}
function box_l_animate(){
box_l.animate({"left":"50px"},1000);
}
三、定时器setTimeout()：
先执行第一个动画，然后设置定时器，加入第一个动画执行时间是1000毫秒，那么定时器就在1000毫秒后执行，以此类推，代码如下：
function A1(){
box_t.animate({"top":"50px"},1000);
}
function A2(){
box_r.animate({"right":"50px"},1000);
}
function A3(){
box_b.animate({"bottom":"50px"},1000);
}
function A4(){
box_l.animate({"left":"50px"},1000);
}
A1();
setTimeout(A2,1000);
setTimeout(A3,2000);
setTimeout(A4,3000);