Tutorialspoint.dev

jQuery | dequeue() with Examples

The dequeue() is an inbuilt method in jQuery which is used to remove the next function from the queue and then it will execute the function. In a queue there will be a several function waiting to run dequeue() used to remove the top function from the queue and execute that function.
Syntax:

$(selector).dequeue(name);

Parameter: It accepts a parameter “name” which specifies the name of the queue.
Return Value : It returns the selected element that perform the given top function.

jQuery code to show the working of this function:

Code #1:
In the below code, animate method is also used to demonstrate the dequeue method.

<html>
   <head>
      <style>
         div {
         margin: 15px 0 0 0  ;
         width: 100px;
         position: absolute;
         height: 30px;
         left: 10px;
         top: 30px;
         background-color: lightgreen;
         text-align: center;
         padding: 15px;
         }
         div.red {
         background-color: red;
         }
      </style>
      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
   </head>
   <body>
      <div>GfG!</div>
      <!-- click on this button to perform animation -->
      <button>Click to start !</button>
      <script>
         $( "button" ).click(function() {
         <!--jQuery code to demonstrate animation with the help of dqueue method-->
           $( "div" )
             .animate({ left:"+=500px" }, 1000 )
             .animate({ top:"0px" }, 1000 )
             .queue(function() {
               $(this).toggleClass("green").dequeue();
             })
             .animate({ left:"50px", top:"150px" }, 1000 );
         });
      </script>
   </body>
</html>

Output:
Before clicking the “Click to start” button-

After clicking the “Click to start” button-



This article is attributed to GeeksforGeeks.org

You Might Also Like

leave a comment

code

0 Comments

load comments

Subscribe to Our Newsletter