动画队列操作

1、概述：

　　关于动画我们已经俩接不少，但是用jquery让动画按照顺序执行的时候，这就涉及到动画队列的问题。

2、相关代码：

<!DOCTYPE HTML >
<HTML>
 <HEAD>
  <TITLE> By ShaZhou </TITLE>
 </HEAD>
 <style>
    #demo div{
        width:100px;
        height:100px;
        background:red;
        position:absolute;
    }
 </style>
<BODY>
 <div id="demo">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
    <div class="five"></div>
    <div class="six"></div>
    <div class="seven"></div>
</div>
<script type="text/javascript" src="jquery-1.11.3.js"></script>
 <script type="text/javascript">
    var _slideFun=[ 
        function(){$('.one').delay(500).animate({top:'+=270px'},500,_takeOne);}, 
        function(){$('.two').delay(300).animate({top:'+=270px'},500,_takeOne);}, 
        function(){$('.three').delay(300).animate({top:'+=270px'},500,_takeOne);}, 
        function(){$('.four').delay(300).animate({top:'+=270px'},500,_takeOne);}, 
        function(){$('.five').delay(300).animate({top:'+=270px'},500,_takeOne);}, 
        function(){$('.six').delay(300).animate({top:'+=270px'},500,_takeOne);}, 
        function(){$('.one').delay(500).animate({top:'-=270px'},500,_takeOne);}, 
        function(){$('.two').delay(300).animate({top:'-=270px'},500,_takeOne);}, 
        function(){$('.three').delay(300).animate({top:'-=270px'},500,_takeOne);}, 
        function(){$('.four').delay(300).animate({top:'-=270px'},500,_takeOne);}, 
        function(){$('.five').delay(300).animate({top:'-=270px'},500,_takeOne);}, 
        function(){$('.six').delay(300).animate({top:'-=270px'},500,_takeOne);},
        function(){$('.seven').delay(300).animate({top:'+=270px'},500,_takeOne);} 
    ]; 
    $('#demo').queue('slideList',_slideFun); 
    var _takeOne=function(){ 
        $('#demo').dequeue('slideList'); 
        setTimeout("_takeOne",10);
    }; 
    $(document).ready(_takeOne());
</script>
</BODY>
 
</HTML>

3、代码简要阐述：

　　jQuery核心中, 有一组队列控制方法，这组方法由queue()/dequeue()/clearQueue()三个方法组成，它对需要连续按序执行的函数的控制可以说是简明自如，主要应用于animate ()方法,，ajax以及其他要按时间顺序执行的事件中。

　　queue(name,[callback]): 当只传入一个参数时，它返回并指向第一个匹配元素的队列(将是一个函数数组,队列名默认是fx)；当有两个参数传入时，第一个参数还是默认为fx的的队列名，第二个参数又分两种情况，当第二个参数是一个函数时，它将在匹配的元素的队列最后添加一个函数。当第二个参数是一个函数数组时，它将匹配元素的队列用新的一个队列来代替(函数数组)。

　　dequeue(name): 这个好理解, 就是从队列最前端移除一个队列函数，并执行它。
clearQueue([queueName]):这是1.4新增的方法. 清空对象上尚未执行的所有队列。参数可选,默认为fx，但个人觉得这个方法没多大用,，用queue()方法传入两个参数的第二种参数即可实现clearQueue方法。

　　1. 新建一个数组,把动画函数依次放进去(这样更改顺序,新加动画是不是方便多了?);
　　2. 用queue将这组动画函数数组加入到slideList队列中;
　　3. 用dequeue取出slideList队列中第一个函数, 并执行它;
　　4. 初始执行第一个函数.