jQuery dequeue() Method (original) (raw)

Last Updated : 27 Oct, 2022

The dequeue() method is an inbuilt method in jQuery that is used to remove the next function from the queue and then it will execute the function. In a queue there will be several functions 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 performs the given top function.

Example 1: In the below code, the dequeue() method is also used to demonstrate the dequeue method.

HTML `

<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;
    }
</style>

<!-- Click on this button to perform animation -->
<button>Click to start !</button>

<!-- jQuery code to demonstrate animation 
    with the help of dequeue method -->
<script>
    $("button").click(function () {
        $("div")
            .animate({ left: "+=500px" }, 1000)
            .animate({ top: "0px" }, 1000)
            .queue(function () {
                $(this).toggleClass("green").dequeue();
            })
            .animate({ left: "50px", top: "150px" }, 1000);
    });
</script>

`

Output:

Example 2: In this example, the size of the box will change when the button is clicked.

HTML `

<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;
    }
</style>

<!-- Click on this button to perform animation -->
<button>Click to start !</button>

<!--jQuery code to demonstrate animation 
    with the help of dequeue method -->
<script>   
    $( "button" ).click(function() {   
        var div = $("#div1");    
        div.animate({width: 400});  
        div.animate({height: 300});  
        div.queue(function(){      
            div.css("background-color", "blue");    
            div.dequeue();  
        });  
        div.animate({width: 100});  
        iv.animate({height: 100});   
    });   
</script>  

`

Output: