jQuery queue()的例子

queue()方法是jQuery内置的方法，用于显示将在选定元素上执行的函数队列。在一个队列中，一个或多个函数等待运行。

queue()方法可以和dequeue()方法一起使用。
一个元素可以有几个队列。一般来说，只有一个默认的jQuery队列。

语法:

$(selector).queue(queue_name)

参数：该方法接受单参数queue_name，这是可选的。它用于设置队列名称。

下面的例子说明了jQuery中的queue()方法。

示例:

<!DOCTYPE html>
<html>
    <head>
        <title>The queue Method</title>
        <script src=
        "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
        </script>
          
        <!-- jQuery code to show the working of this method -->
        <script>
            (document).ready(function() {
                ("p").click(function() {
                    var div = ("div");
       
                    div.animate({
                        left: "+=200"
                    }, 2000);
                    div.animate({
                        height: 200
                    }, "slow");
                    div.animate({
                        width: 150
                    }, "slow");
                    div.animate({
                        height: 100
                    }, "slow");
                    div.animate({
                        width: 60
                    }, "slow");
                    div.animate({
                        left: "-=200",
                        top: "+=100"
                    }, 2000);
       
                    ("span").text(div.queue().length);
                });
            });
        </script>
        <style>
            div {
                width: 50px;
                height: 50px;
                position: absolute;
                left: 35px;
                margin-top: 10px;
                background-color: green;
            }
               
            body {
                width: 500px;
                height: 250px;
                border: 2px solid green;
                padding: 20px;
            }
        </style>
    </head>
      
    <body>
        <p>The queue length is: <span></span></p>
          
        <!-- click on above paragraph to show the
        number of times animation method works -->
        <div></div>
    </body>
</html>