1、.delay().animate();
2、回调函数
3、setTimeout
我爱模板网在这里简单的一一举例,有不当之处还希望各位大神指教:
首先,我们先写四个div,让他们从上下左右进入父容器:
<html> <head> <meta charset="utf-8" /> <title>动画依次执行 我爱模板网 www.5imoban.net</title> <script src="http://www.5imoban.net/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);