jQuery .queue() method manipulates the queue of functions

Syntax and Description


.queue([queueName]) 
.queue([queueName], newQueue) 
.queue([queueName], callback)

Manipulate the queue of functions to be executed on the matched elements.

  • queueName (optional)The name of the queue. Defaults to fx, the standard effects queue
  • newQueueAn array of functions to replace the current queue contents
  • callbackThe new function to add to the queue

.queue([queueName]) returns an array of the functions currently in the first element's queue.

(.queue([queueName], newQueue) and .queue([queueName], callback)) returns the jQuery object, for chaining purposes.

Queue a custom function


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!--   w ww.j  a v a2  s.  com-->

            $(document.body).click(function () {
              $("div").show("slow");
              $("div").animate({left:'+=20'},2000);
              $("div").queue(function () {
                $(this).addClass("newcolor");
                $(this).dequeue();
              });
              $("div").animate({left:'-=20'},500);

              $("div").slideUp();
            });
        });
    </script>
<style>
  div { margin:3px; width:50px; position:absolute;
        height:50px; left:10px; top:30px; 
        background-color:yellow; }
  div.red { background-color:red; }
  
</style>
  </head>
  <body>
    <body>
        Click here...
          <div>java2s.com</div>
    </body>
</html>

Click to view the demo

Replace with new queue

Replaces the queue of all matched element with this new queue (the array of functions).


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!--  w ww .j a v a2 s . co m-->
            $(document.body).click(function () {
              $("div").show("slow");
              $("div").animate({left:'+=20'},2000);
              $("div").queue(function () {
                $(this).addClass("newcolor");
                $(this).dequeue();
              });
              $("div").animate({left:'-=20'},500);

              $("div").slideUp();
            });
        });
    </script>
<style>

  div { margin:3px; width:50px; position:absolute;
        height:50px; left:10px; top:30px; 
        background-color:yellow; }
  div.red { background-color:red; }
  
</style>
  </head>
  <body>
    <body>
        Click here...
          <div></div>
    </body>
</html>

Click to view the demo





















Home »
  jQuery »
    jQuery Tutorial »




Basics
Selector
DOM
Event
Effect
Utilities