.queue()

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  w  w  .  j a va2  s  .c  o  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>java2s.com</div>
    </body>
</html>

Click to view the demo

The code above generates the following result.

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  va 2s. c  o 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

The code above generates the following result.