.clearQueue()

jQuery

previous page next page

.clearQueue()

Categories: Effects > Custom | Data | Utilities

.clearQueue( [queueName ] ) Returns: jQuery

Description: Remove from the queue all items that have not yet been run.

  • version added: 1.4.clearQueue( [queueName ] )

    • queueName
      Type: String
      A string containing the name of the queue. Defaults to fx, the standard effects queue.

When the .clearQueue() method is called, all functions on the queue that have not been executed are removed from the queue. When used without an argument, .clearQueue() removes the remaining functions from fx, the standard effects queue. In this way it is similar to .stop(true). However, while the .stop() method is meant to be used only with animations, .clearQueue() can also be used to remove any function that has been added to a generic jQuery queue with the .queue() method.

Example:

Empty the queue.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
 
                                  

                                    

                                      
                                        <!DOCTYPE html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <head>
                                      
                                    

                                  

                                  

                                    

                                        <style>
                                    

                                  

                                  

                                    

                                      div { margin:3px; width:40px; height:40px;
                                    

                                  

                                  

                                    

                                          position:absolute; left:0px; top:30px;
                                    

                                  

                                  

                                    

                                          background:green; display:none; }
                                    

                                  

                                  

                                    

                                      div.newcolor { background:blue; }
                                    

                                  

                                  

                                    

                                      
                                        </style>
                                      
                                    

                                  

                                  

                                    

                                        <script src="http://code.jquery.com/jquery-latest.js"></script>
                                    

                                  

                                  

                                    

                                      
                                        </head>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <body>
                                      
                                    

                                  

                                  

                                    

                                        <button id="start">Start</button>
                                    

                                  

                                  

                                    

                                      <button id="stop">Stop</button>
                                    

                                  

                                  

                                    

                                      
                                        <div>
                                        </div>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <script>
                                        
                                      
                                    

                                  

                                  

                                    

                                      $("#start").click(function () {
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                        var myDiv = $("div");
                                    

                                  

                                  

                                    

                                        myDiv.show("slow");
                                    

                                  

                                  

                                    

                                        myDiv.animate({left:'+=200'},5000);
                                    

                                  

                                  

                                    

                                        myDiv.queue(function () {
                                    

                                  

                                  

                                    

                                          var _this = $(this);
                                    

                                  

                                  

                                    

                                          _this.addClass("newcolor");
                                    

                                  

                                  

                                    

                                          _this.dequeue();
                                    

                                  

                                  

                                    

                                        });
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                        myDiv.animate({left:'-=200'},1500);
                                    

                                  

                                  

                                    

                                        myDiv.queue(function () {
                                    

                                  

                                  

                                    

                                          var _this = $(this);
                                    

                                  

                                  

                                    

                                          _this.removeClass("newcolor");
                                    

                                  

                                  

                                    

                                          _this.dequeue();
                                    

                                  

                                  

                                    

                                        });
                                    

                                  

                                  

                                    

                                        myDiv.slideUp();
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      });
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      $("#stop").click(function () {
                                    

                                  

                                  

                                    

                                        var myDiv = $("div");
                                    

                                  

                                  

                                    

                                        myDiv.clearQueue();
                                    

                                  

                                  

                                    

                                        myDiv.stop();
                                    

                                  

                                  

                                    

                                      });</script>
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        </body>
                                      
                                    

                                  

                                  

                                    

                                      
                                        </html>
 POWERED BYHERONOTE
previous page start next page