jQuery之.queue()

最新推荐文章于 2022-03-11 14:38:41 发布

转载最新推荐文章于 2022-03-11 14:38:41 发布 · 107 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/princeding/p/4402212.html

文章标签：

#javascript #ViewUI

本文详细介绍了如何利用jQuery为div元素创建一个包含多个动画任务的自定义动画队列，实现元素的异步动画效果。通过展示动画队列的创建过程、动画任务的执行顺序及动画执行的异步特性，帮助开发者理解和应用这一技术来提升网页交互体验。

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

        $(document).ready(function () {
            $("#btn").on("click", function () {
                //自定义动画队列
                var animationQueue = [
                    function () {
                        $("div").animate({ left: "+=100px" }, animateContinue);
                    },
                    function () {
                        $("div").animate({ left: "+=100px" }, animateContinue);
                    },
                    function () {
                        $("div").animate({ left: "+=100px" }, animateContinue);
                    },
                    function () { alert("动画执行结束") }
                ];
                $("div").slideToggle(); //显示div
                $("div").queue("myfx", animationQueue); //新建动画队列：myfx
                alert($("div").queue("myfx").length);   //动画是异步执行的，这里是4
                var animateContinue = function () { $("div").dequeue("myfx") };
                animateContinue();
                alert($("div").queue("myfx").length);   //这里是3
            });
        });