jQuery | clearQueue() 示例

clearQueue() 方法从队列中删除所有尚未运行的项目。请注意，当一个函数开始运行时，它会一直运行直到完成。
句法：

$(selector).clearQueue(name);

这里的“选择器”是被选择的元素。
参数：它接受一个参数“name”，它是函数的名称。
返回值：它返回具有删除函数的选定元素。

显示 clearQueue() 方法工作的 jQuery 代码：
代码#1：
在下面的代码中，动画方法被清除。

  

    
    
    
        <!-- jQuery code to demonstrate clearQueue method -->
        $(document).ready(function() {
            <!-- click button to start animation -->
            $("#b1").click(function() {
                $("div").animate({
                    height: 200
                }, 2000);
                $("div").animate({
                    width: 200
                }, 2000);
                $("div").animate({
                    height: 100
                }, 2000);
                $("div").animate({
                    width: 100
                }, 2000);
                $("div").animate({
                    height: 200
                }, 2000);
                $("div").animate({
                    width: 200
                }, 2000);
                $("div").animate({
                    height: 100
                }, 2000);
                $("div").animate({
                    width: 100
                }, 2000);
            });
            <!-- button to stop animation -->
            $("#b2").click(function() {
                $("div").clearQueue();
            });
        });
    
    
        div {
            background: green;
            height: 100px;
            width: 100px;
        }
          
        button {
            margin-top: 10px;
        }
    

  

    
    
    Start !
    
    Stop !

  

输出：
在单击任何按钮之前 –

点击“开始！”后过了一段时间“停下！”按钮-

代码#2：

  

    
    
        <!-- jQuery code to demonstrate clearQueue method -->
        $(document).ready(function() {
            $(".b1").click(function() {
                $("p").animate({
                    borderRightWidth: "5px"
                });
                $("p").animate({
                    borderTopWidth: "5px"
                });
                $("p").animate({
                    borderLeftWidth: "5px"
                });
                $("p").animate({
                    borderBottomWidth: "5px"
                });
            });
            $(".b2").click(function() {
                $("p").clearQueue();
            });
        });
    
    
        p {
            display: block;
            width: 150px;
            border: 1px solid green;
            padding: 10px;
        }
    

  

    This is a paragraph.
    
    Start
    
    Stop

  

输出：
在单击任何按钮之前 –

点击“开始！”后过了一段时间“停下！”按钮-