首页 > 建站教程 > JS、jQ、TS >  jQuery动画依次执行的三种常用方法讲解正文

jQuery动画依次执行的三种常用方法讲解

动画依次执行的常用方法有但不仅限于下面三种:
    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);