queue() Effect in Jquery

Description:

The jquery queue() method shows the queue of functions to be executed on the matched/selected elements. A queue is one or more functions waiting to run and it has several queues. Most often it has only one, the “fx” queue, which is the default jQuery queue.

For Better Understand:

It is an array of functions stored on a per element basis, using jQuery.data(). They work as First-In-First-Out. To understand better, we have to understand how jQuery does animation. If you write multiple animate method calls one after the other, jQuery creates an internal queue and adds these method calls to it. Then it runs those animate calls one by one.

Syntax

$(selector).queue(queueName)

queueName

Optional. Specifies the name of the queue Default is “fx”, the standard effects queue

Example:

<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
 <script type="text/javascript">

 $(document).ready(function () {
 $("button").click(function () {
 var divqueue = $("#divqueue");
 divqueue.animate({ height: 100 }, "slow").animate({ width: 100 }, "slow")
 .animate({ height: 80 }, "slow").animate({ width: 80 }, "slow").animate({ margin: 80 }, "slow");
 $("#divQueueLen").text(divqueue.queue().length);
 });
 });

 </script>
 
</head>
<body>
 <button>Queue Animation</button>

 length of the queue: <span id="divQueueLen"></span>

 <div id="divqueue" style="width:200px;height:200px;margin:50px; background-color:#4CAF50;"></div>
</body>
</html>

<html>

<head>

$(document).ready(function () {

$("button").click(function () {

var divqueue = $("#divqueue");

divqueue.animate({ height: 100 }, "slow").animate({ width: 100 }, "slow")

.animate({ height: 80 }, "slow").animate({ width: 80 }, "slow").animate({ margin: 80 }, "slow");

$("#divQueueLen").text(divqueue.queue().length);

});

</script>

</head>

<body>

<button>Queue Animation</button>

length of the queue: <span id="divQueueLen"></span>

</body>

</html>

Output:

On Click of “Click to start animation” button, the “divpanelBox” started to append (css stlyle) the new height & width for the same and started to increasing the size of the div as shown below.

Example:

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script type="text/javascript">

        $(document).ready(function () {

            $('#btnStopAnimationQueue').click(function () {
                $('#divQueueBox').queue('fx',[]);
            });

            $('#btnStartQueueAnimation').click(function () {
                $('#divQueueBox').queue(function () {
                    $(this).animate({ height: '-=50', width: '-=50', "margin-left": '+=100' }, 1000);
                    $(this).animate({ height: '-=50', width: '-=50', "margin-left": '+=100' }, 1000);
                    $(this).animate({ height: '-=50', width: '-=50', "margin-left": '+=100' }, 1000);
                    $(this).dequeue();
                });
            });
        });
    </script>

    <style type="text/css">
        #divQueueBox {
            border: 1px solid red;
            width: 250px;
            height: 250px;
            position: absolute;
            background-color: #f00;
            left: 320px;
        }
    </style>
</head>
<body>

    <p><button id="btnStartQueueAnimation">start Queue animation.</button><br /></p>
    <div id='divQueueBox'>
    </div>
</body>
</html>

<html>

<head>

$(document).ready(function () {

$('#btnStopAnimationQueue').click(function () {

$('#divQueueBox').queue('fx',[]);

});

$('#btnStartQueueAnimation').click(function () {

$('#divQueueBox').queue(function () {

$(this).animate({ height: '-=50', width: '-=50', "margin-left": '+=100' }, 1000);

$(this).dequeue();

});

</script>

#divQueueBox {

border: 1px solid red;

width: 250px;

height: 250px;

position: absolute;

background-color: #f00;

left: 320px;

}

</style>

</head>

<body>

<p><button id="btnStartQueueAnimation">start Queue animation.</button><br /></p>

</div>

</body>

</html>

Output:

Note :

After we build up our queue items, we have to call dequeue() on the queue in order to kick off the series of sequential events.deQueue() method . we need to use dequeue() method with queue() else the queue will not be closed and you will get undesired result.

queue() Effect in Jquery