jQuery里面的动画队列

参数说明

参数	说明
element	检查附加列队的DOM元素
queueName	字符串值，包含序列的名称。默认是 fx, 标准的效果序列
newQueue	替换当前函数列队内容的数组
callback()	要添加进队列的函数

方法	概述
queue(element,[queueName])	显示或操作在匹配元素上执行的函数队列
dequeue([queueName])	从队列最前端移除一个队列函数，并执行他

<button class="btn">按钮</button>
<br/>
<button class="btn">按钮</button>
<br/>
<button class="btn">按钮</button>
<br/>
<button class="btn">按钮</button>
<br/>
<button class="btn">按钮</button>
<br/>
<button class="btn">按钮</button>
<br/>
<button class="btn">按钮</button>

    //对按钮集合进行遍历
    var speed=500;
    animate();
    function animate(){
        $(".btn").each(function(index){
            var delay=index*speed;
            $(this).delay(delay).animate({
                width:(index+1)*60
            },speed);
        }).last().queue(function(){
            //清除动画队列
            $('.btn').clearQueue().css('width','50px');
            animate();
        })
    } 

    $('.btn').animate({width:200},200);
    $('.btn').animate({height:200},200);
    $('.btn').queue(function(){
        console.log("当前动画执行完成");
        $(this).dequeue();
    });
    $('.btn').animate({width:50},500);
    $('.btn').animate({height:50},500); 

    //默认动画队列fx
    var animateArr=[
        function(){
            $(this).animate({width:200},500,fun);
        },
        function(){
            $(this).animate({height:200},500,fun);
        },
        function(){
            $(this).animate({width:50},500,fun);
        },
        function(){
            $(this).animate({height:50},500,fun);
        }
    ]
    $('.btn').queue('myanimate', animateArr);
    var fun=function(){
        $('.btn').dequeue('myanimate');
    }