jQuery 动画和队列——0721

本文示例对应的页面元素如下：

<button id="btn">动画</button>
<button id="stop">停止</button>
<button id="allstop">关闭页面所有动画</button>
<button id="allstart">开启页面所有动画</button>
<button class="getqueue">获取动画队列</button>
<div class="box"></div>
<div class="box1"></div>
<ul>
    <li>eq(index|-index)
        first()
    </li>
    <li>last()
        hasClass(class)
    </li>
    <li>filter(expr|obj|ele|fn)
        is(expr|obj|ele|fn)
    </li>
    <li>map(callback)
        has(expr|ele)
    </li>
    <li>not(expr|ele|fn)
        slice(start,[end])
    </li>
</ul>

一、动画

    /*
     * 基本动画  hide show   toggle
     * 参数   speed（时间 slow fast）  方式（swing linear）   回调函数（动画完成之后执行）
     *
     * 滑动
     * slideDown  slideUp  slideToggle
     *
     * 淡入淡出
     * fadeIn（淡入，隐藏状态下使用） fadeOut fadeTo(参数：speed，透明度，方式，回调函数) fadeToggle
     *
     * 自定义
     * animate delay stop finish
     * delay的参数：duration:延时时间，单位：毫秒; queueName:队列名词，默认是Fx，动画队列。
     * animate的参数：属性值的集合{}，speed，easing，fn
     * stop 停止所有在指定元素上正在运行的动画。
     *      参数：队列名称，是否清空队列（立即结束动画），是否完成队列（立即完成动画）
     * finish 停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画。
     * */

    $("#btn").click(function () {
        /*$(".box").toggle(1000,"linear",function(){
         console.log("动画完成");
         });*/

        /*$(".box").slideToggle(1000,"linear",function(){
         console.log("动画完成");
         });*/

        /*$(".box").fadeOut(1000,"linear",function(){
         console.log("动画完成");
         });*/

        /*$(".box").fadeIn(1000,"linear",function(){
         console.log("动画完成");
         });*/

        /*$(".box").fadeToggle(1000,"linear",function(){
         console.log("动画完成");
         });*/

        /*$(".box").fadeTo(1000,0.5,"linear",function(){
         console.log("动画完成");
         });*/

        $(".box").delay(500).animate({
            width: 50,
            height: 50
        }, 1000).animate({
            width: 200,
            height: 200
        }, 1000);
    });

    $("#stop").click(function () {
        $(".box").stop(false, false);
        //$(".box").finish()
    });

注意：
.finish()方法和.stop(true, true)很相似，.stop(true, true)将清除队列，并且目前的动画跳转到其最终值。
但是，不同的是，.finish() 会导致所有排队的动画的CSS属性跳转到他们的最终值。

动画设置：

jQuery.fx.off 关闭页面上所有的动画。

把这个属性设置为jQuery.fx.off=true可以立即关闭所有动画(所有效果会立即执行完毕，延迟还在）。
当把这个属性设成jQuery.fx.off=false之后，可以重新开启所有动画。

一般在以下情况下使用：

• 在配置比较低的电脑上使用jQuery。
• 你的一些用户由于动画效果而遇到了可访问性问题。

二、队列控制

    /*
     * 队列控制 queue dequeue clearQueue
     * queue 显示或操作在匹配元素上执行的函数队列
     * dequeue 从队列最前端移除一个队列函数，并执行他。参数是队列名，默认为fx
     * clearQueue 清空对象上尚未执行的所有队列。参数是队列名，默认为fx
     *       如果不带参数，则默认清空的是动画队列。
     * */
    $(".getqueue").click(function () {
        console.log($(".box").queue().length);   //动画执行过程中获取

        $(".box").queue(function () {  //回调函数为要添加进队列的函数
            console.log(1);
            $(this).dequeue();
        })
    });

    //参数：队列名，往队列里边添加的函数集合
    $("li").last().queue("myfx", [
        function () {
            $("li").last().animate({
                fontSize: 30
            }, 500);
        },
        function () {
            $("li").last().animate({
                fontSize: 20
            }, 500);
        },
        function () {
            $("li").last().animate({
                fontSize: 10
            }, 500);
        }
    ]);
    $("#stop").click(function () {
        //从队列最前端移除一个队列函数，并执行他
        $("li").last().dequeue("myfx");
        console.log($("li").last().queue().length);  //1
    });

	//自定义动画队列
    $("li").last().animate({
        fontSize: 30
    }, 500).animate({
        fontSize: 20
    }, 500).animate({
        fontSize: 10
    }, 500).queue(function () {
        console.log($(this).queue().length);   //1
        $(this).dequeue();
        console.log($(this).queue().length);   //0
    });

    $("#stop").click(function () {
    	//清空尚未执行的所有队列
        $("li").last().clearQueue();  //效果类似于stop(true)
    });

.clearQueue() 跟stop(true)类似，但stop()只能清空动画队列，而这个可以清空所有通过 .queue() 创建的队列。