队列的基础案例

最新推荐文章于 2023-04-24 21:22:12 发布

lu_kuankuan

最新推荐文章于 2023-04-24 21:22:12 发布

阅读量220

点赞数

分类专栏： JavaScript jQuery 文章标签： queue

JavaScript 同时被 2 个专栏收录

5 篇文章

订阅专栏

jQuery

2 篇文章

订阅专栏

本文介绍了一种利用jQuery的队列(queue)功能实现动画的方法，通过创建函数数组和使用回调函数，可以有效地控制动画的顺序执行，使得动画的管理更加灵活便捷。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>queue队列</title>
    <style>
        div {
            background: #aaa;
            width: 18px;
            height: 18px;
            position: absolute;
            top: 50px;
        }
    </style>
</head>

<body>
    <!-- 来自   https://www.cnblogs.com/zhwl/p/4633275.html -->
    <p>
        <a href="https://www.cnblogs.com/zhwl/p/4633275.html">案例来源</a>
    </p>
    <div id="block1">1</div>
    <div id="block2" style="background:red;">2</div>
    <script src="./jquery-1.10.2.min.js"></script>
    <script>
        //回调套回调的队列动画
        // $("#block1").animate({
        //     left: "+=100"
        // }, function () {
        //     $("#block2").animate({
        //         left: "+=100"
        //     }, function () {
        //         $("#block1").animate({
        //             left: "+=100"
        //         }, function () {
        //             $("#block2").animate({
        //                 left: "+=100"
        //             }, function () {
        //                 $("#block1").animate({
        //                     left: "+=100"
        //                 }, function () {
        //                     alert("动画结束");
        //                 });
        //             });
        //         });
        //     });
        // });

        //使用queue来运行 一样的效果
        var FUNC = [
            function () {
                $("#block1").animate({
                    left: "+=100"
                }, aniCB);
            },
            function () {
                $("#block2").animate({
                    left: "+=100"
                }, aniCB);
            },
            function () {
                $("#block1").animate({
                    left: "+=100"
                }, aniCB);
            },
            function () {
                $("#block2").animate({
                    left: "+=100"
                }, aniCB);
            },
            function () {
                $("#block1").animate({
                    left: "+=100"
                }, aniCB);
            },
            function () {
                alert("动画结束")
            }
        ];
        var aniCB = function () {
            $(document).dequeue("myAnimation");
        }
        $(document).queue("myAnimation", FUNC);
        aniCB();
        // 1，我首先建议建立了一个函数数组，里边是一些列需要依次执行的动画
        // 2，然后我定义了一个回调函数，用dequeue方法用来执行队列中的下一个函数
        // 3，接着把这个函数数组放到document上的myAnimation的队列中（可以选择任何元素，我只是为了方便而把这个队列放在document上）
        // 4，最后我开始执行队列中的第一个函数

        // 这样做的好处在于函数数组是线性展开，增减起来非常方便。
        // 而且，当不要要继续进行接下来动画的时候(比如用户点了某个按钮)，只需要清空那个队列即可。而要增加更多则只需要加入队列即可

        // //清空队列
        $(document).queue("myAnimation",[]);
        // //加一个新的函数放在最后
        $(document).queue("myAnimation",function(){alert("动画真的结束了！")});
        // 以前发过一个wait插件，用于让动画之间可以暂停一段时间
    </script>
</body>

</html>