JQ queue ()/dequeue ()/clearqueue () control method detailed

JQ queue ()/dequeue ()/clearqueue () control method detailed

First look at the example

<style>
input{margin:10px 0 10px 50px;padding:3px 8px; font-size:14px;font-weight:bolder;}
#demo {position:relative;width:630px;height:300px;background: #eee; border-top:5px solid #888; border-bottom:5px Solid #888}
. one,.two,.three,.four,.five,.six,.seven{display:block;position:absolute;left:30px;top:0;width:30px;height : 30px;background: #888; color: #fff; text-align:center;font-weight:bold;line-height:30px}
. two{left:120px}
. three{left:210px}
. four{left:300px}
. five{left:390px}
. six{left:480px}
. seven{left:570px}
</style>

JS HTML code

<input type= "button" value= "Stop animation"/>
<div id= "Demo" >
<span class= "One" >01</span>
<span class= "Two" >02</span>
<span class= "three" >03</span>
<span class= "Four" >04</span>
<span class= "Five" >05</span>
<span class= "Six" >06</span>
<span class= "Seven" >07</span>

</div>
<!--demo End-->
<script src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js "><script>
/*******************************
* @author Mr.think
* @author Blog http://mrthink.net/
* @2010.11.16
* Be free to reprint and use, but please specify the copyright ownership
*******************************/
$ (function () {
The animate () method can be used so dizzy to achieve
$ ('. One '). Delay. Animate ({top: ' +=290px '},500,function () {
$ ('. two '). Delay. Animate ({top: ' +=290px '},500,function () {
$ ('. three '). Delay. Animate ({top: ' +=290px '},500,function () {
$ ('. Four '). Delay. Animate ({top: ' +=290px '},500,function () {
$ ('. Five '). Delay. Animate ({top: ' +=290px '},500,function () {
$ ('. Six '). Delay. Animate ({top: ' +=290px '},500,function () {
$ ('. Seven '). Animate ({top: ' +=290px '},500,function () {
Alert (' By the end of the sequence of motion! yeah! ')
//       });
//      });
//     });
//    });
//   });
//  });
// });

You can also use the queue () method to achieve simplicity and ease
var _slidefun=[
Put the animation you want to perform into an array in turn
Function () {$ ('. One '). Delay. Animate ({top: ' +=290px '},500,_takeone);},
Function () {$ ('. two '). Delay. Animate ({top: ' +=290px '},500,_takeone);
Function () {$ ('. three '). Delay. Animate ({top: ' +=290px '},500,_takeone);
Function () {$ ('. Four '). Delay. Animate ({top: ' +=290px '},500,_takeone);
Function () {$ ('. Five '). Delay. Animate ({top: ' +=290px '},500,_takeone);
Function () {$ ('. Six '). Delay. Animate ({top: ' +=290px '},500,_takeone);
Function () {$ ('. Seven '). Delay. Animate ({top: ' +=290px '},500,function () {
Alert (' By the end of the sequence of motion! yeah! ');
});}
];
Put the function array into the Slidelist animation queue
$ (' #demo '). Queue (' Slidelist ', _slidefun);
var _takeone=function () {
Remove the first function and execute it
$ (' #demo '). Dequeue (' slidelist ');
};
Initial execution of the first function
_takeone ();

$ (': Button '). Click (function () {
$ (this). Val (' Refresh Retry '). attr (' disabled ', true). CSS tutorial (' Color ', ' #ccc ');
Stops can also be used to load an empty array to implement $ (' #demo '). Queue (' Slidelist ', []);
$ (' #demo '). Clearqueue (' slidelist ');
});
});
</script>

Queue (Name,[callback]): When only one parameter is passed in, it returns and points to the queue of the first matching element (it will be an array of functions, the default is FX); When two arguments are passed in, the first argument is the name of the queue that defaults to FX. The second argument is divided into two cases, and when the second argument is a function, it adds a function at the end of the queue of matching elements. When the second argument is an array of functions, it replaces the queue of matching elements with a new queue (an array of functions). Maybe, this is a bit dizzy to understand, and later, there will be a bit of this view demo.
Dequeue (name): The good understanding is to remove a queue function from the front end of the queue and execute it.
Clearqueue ([queuename]): This is the 1.4 new method. Empties all the queues on the object that have not yet been executed. The parameter is optional, the default is FX. But personally think this method is not much use, with queue () method to implement the Clearqueue method by passing in the second parameter of two parameters.
Now we want to implement an effect that has a number box labeled 1 to 7, which requires that the seven squares fall from left to right

$ ('. One '). Delay. Animate ({top: ' +=270px '},500,function () {
  $ ('. two '). Delay (500). Animate ({top: ' +=270px '},500,function () {
   $ ('. three '). Delay (%). Animate ({top: ' +=270px '}, 500,function () {
    $ ('. Four '). Delay. Animate ({top: ' +=270px '},500,function () {
     $ ('. Five '). Delay. Animate ({top: ' +=270px '},500,function () {
       $ ('. Six '). Delay. Animate ({top: ' +=270px '},500,function () {
        $ ('. Seven '). Animate ({top: ' +=270px '},500,function () {
         alert (' The end of the sequence falling motion! yeah! ')
       });
      });
     });
    });
   });
  });
 });

The fruit is perfectly presented, but this dizzy code, can you stand it? Even if you can endure, if at this time, you want to change a certain order of execution, for example, you want to let 5 fall after falling 3, or new add 8 to 158 square, how to do? Rewrite it? Are you careful to change it in there? Obviously, I We need another simple and convenient way to achieve this, and that is the jquery queue control method

var _slidefun=[
 function () {$ ('. One '). Delay. Animate ({top: ' +=270px '},500,_takeone);
 function () {$ ('. two '). Delay. Animate ({top: ' +=270px '},500,_takeone);},
 function () {$ ('. Three '). Delay. Animate ({top: ' +=270px '},500,_takeone);},
 function () {$ ('. Four '). Delay ( {top: ' +=270px '},500,_takeone);},
 function () {$ ('. Five '). Delay ({top: ' animate ' +=270px Takeone);},
 function () {$ ('. Six '). Delay. Animate ({top: ' +=270px '},500,_takeone);
  Function () {$ ('. Seven '). Delay. Animate ({top: ' +=270px '},500,function () {
  alert (' End of the sequence of motion! yeah! ');
 });
];
$ (' #demo '). Queue (' Slidelist ', _slidefun);
var _takeone=function () {
 $ (' #demo '). Dequeue (' slidelist ');
};
_takeone ();

. Create a new array, put the animation function in sequence (this change in order, the new animation is more convenient?);
2. Add the array of animated functions to the Slidelist queue using queue;
3. Remove the first function in the slidelist queue with dequeue and execute it;
4. Initial execution of the first function.
Demo Demo also has detailed comments, if the above explanation is still not clear, please see the source code.
As far as the Clearqueue () method is concerned, the Stop button in the demo is called the Clearqueue () method, and of course you can use the queue () method directly