jQuery的动画队列

最新推荐文章于 2025-07-11 00:22:58 发布

weixin_30908707

最新推荐文章于 2025-07-11 00:22:58 发布

阅读量83

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yan-ck/p/5742280.html

动画队列主要用到jQuery的queue、dequeue和clearqueue。

1.queue（）函数主要是将一个动画函数数组绑定到一个队列上

2.dequeue（）函数主要是执行队列的第一个函数，并从队列中删除。

3.clearqueue（）函数是清除动画队列。

<!DOCTYPE html>
<html>
<head>
    <title>queue</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="js/jquery.js"></script>
    <style type="text/css">
        img{
            width:400px;
            height:300px;
            position: absolute;
            bottom:100px;
            right:100px;
        }
    </style>
</head>
<body>
<!-- 设置五幅图片 -->
<div>

    <img src="img/1.jpg" alt="图片1" class="one">
    <img src="img/2.jpg" alt="图片2" class="two">
    <img src="img/3.jpg" alt="图片3" class="three">
    <img src="img/4.jpg" alt="图片4" class="four">
    <img src="img/5.jpg" alt="图片5" class="five">
       
</div>
<script type="text/javascript">
$(function(){
    //创建函数数组aniList，定义动画队列的执行顺序（按照函数数组的indexof）。
    var aniList = [
        function(){
            $('.one').delay(500).animate({right : "+=800px" ,bottom : "+=600"},1000,nextQueue)
        }
    ,
        function(){
            $('.two').delay(500).animate({right : "+=640px" ,bottom : "+=480"},1000,nextQueue)
        }
    ,
        function(){
            $('.three').delay(500).animate({right : "+=480px" ,bottom : "+=360"},1000,nextQueue)
        }
    ,
        function(){
            $('.four').delay(500).animate({right : "+=320px" ,bottom : "+=240"},1000,nextQueue)
        }
    ,
        function(){
            $('.five').delay(500).animate({right : "+=160px",bottom : "+=120"},1000,nextQueue)
        }
    ];
    //将队列名称定义为aniName
    $('div').queue('aniName',aniList);
    //取出动画队列aniName的第一个动画函数并执行
    var nextQueue = function(){
        $('div').dequeue('aniName');
    };
    nextQueue();

    $("<button>right</button>")
        .appendTo('body').bind("click",function(){
        //清除动画队列。
        $('div').clearQueue('aniName');
        return false;
    })
})       
</script>
</body>
</html>

转载于:https://www.cnblogs.com/yan-ck/p/5742280.html