jQuery.dequeue()

jQuery

previous page next page

jQuery.dequeue()

Categories: Data | Utilities

jQuery.dequeue( element [, queueName ] ) Returns: undefined

Description: Execute the next function on the queue for the matched element.

  • version added: 1.3jQuery.dequeue( element [, queueName ] )

    • element
      Type: Element
      A DOM element from which to remove and execute a queued function.
    • queueName
      Type: String
      A string containing the name of the queue. Defaults to fx, the standard effects queue.

Note: This is a low-level method, you should probably use .dequeue() instead.

When jQuery.dequeue() is called, the next function on the queue is removed from the queue, and then executed. This function should in turn (directly or indirectly) cause jQuery.dequeue() to be called, so that the sequence can continue.

Example:

Use jQuery.dequeue() to end a custom queue function which allows the queue to keep going.

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
 
                                  

                                    

                                      
                                        <!DOCTYPE html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <head>
                                      
                                    

                                  

                                  

                                    

                                        <style>div {
                                    

                                  

                                  

                                    

                                        margin:3px; width:50px; position:absolute;
                                    

                                  

                                  

                                    

                                        height:50px; left:10px; top:30px;
                                    

                                  

                                  

                                    

                                        background-color:yellow;
                                    

                                  

                                  

                                    

                                      
                                        }
                                      
                                    

                                  

                                  

                                    

                                      div.red { background-color:red; }  </style>
                                    

                                  

                                  

                                    

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

                                  

                                  

                                    

                                      
                                        </head>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <body>
                                      
                                    

                                  

                                  

                                    

                                        <button>Start</button>  <div></div>
                                    

                                  

                                  

                                    

                                      
                                        <script>
                                        $("button").click(function () {
                                      
                                    

                                  

                                  

                                    

                                        $("div").animate({left:'+=200px'}, 2000);
                                    

                                  

                                  

                                    

                                        $("div").animate({top:'0px'}, 600);
                                    

                                  

                                  

                                    

                                        $("div").queue(function () {
                                    

                                  

                                  

                                    

                                          $(this).toggleClass("red");
                                    

                                  

                                  

                                    

                                           $.dequeue( this );
                                    

                                  

                                  

                                    

                                                });
                                    

                                  

                                  

                                    

                                        $("div").animate({left:'10px', top:'30px'}, 700);
                                    

                                  

                                  

                                    

                                      });</script>
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        </body>
                                      
                                    

                                  

                                  

                                    

                                      
                                        </html>
 POWERED BYHERONOTE
previous page start next page