.queue()

Syntax


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

queueName (optional): The name of the queue. Defaults to fx, the standard effects queue
newQueue: An array of functions to replace the current queue contents
callback: The new function to add to the queue

Return value

.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.

Description

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

Examples

Queue a custom function

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){

            $(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

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

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $(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