.dequeue()

jQuery

previous page next page

.dequeue()

Categories: Effects > Custom | Data | Utilities

.dequeue( [queueName ] ) Returns: jQuery

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

  • version added: 1.2.dequeue( [queueName ] )

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

When .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 .dequeue() to be called, so that the sequence can continue.

Example:

Use 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
26
27
28
 
                                  

                                    

                                      
                                        <!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");
                                    

                                  

                                  

                                    

                                          $(this).dequeue();
                                    

                                  

                                  

                                    

                                        });
                                    

                                  

                                  

                                    

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

                                  

                                  

                                    

                                      });
                                    

                                  

                                  

                                    

                                      
                                        </script>
                                      
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        </body>
                                      
                                    

                                  

                                  

                                    

                                      
                                        </html>
 POWERED BYHERONOTE
previous page start next page