.queue()

In this chapter you will learn:

Syntax and Description for .queue()
Queue a custom function
Replace with new 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><!--  ja va  2s .c o  m-->
  <head>
    <script src="http://java2s.com/style/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>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><!--from   jav  a  2  s  . co m-->
  <head>
    <script src="http://java2s.com/style/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>

.queue()

Syntax and Description

Queue a custom function

Replace with new queue

Next chapter...

.animate()

.css() does animation

.clearQueue()

.delay()

.dequeue()

.extend()

.fadeIn()

.fadeOut()

.fadeTo()

.hide()

.queue()

.show()

.slideDown()

.slideToggle()

.slideUp()

.stop()

.toggle()