jQuery动画

学习要点：

• 1.显示、隐藏
• 2.滑动、卷动
• 3.淡入、淡出
• 4.自定义动画
• 5.列队动画方法
• 6.动画相关方法
• 7.动画全局属性

一、显示隐藏

<input type="button" id="show" value="显示"/>
<input type="button" id="hide" va&lt;/dlue="隐藏"/>
<div style="background:red;width:200px;height:200px;" id="box"></div>
$("#show").click(function () {
    $("#box").show();
});
$("#hide").click(function () {
    $("#box").hide();
});

可以设置一下匀速运动时间

$("#show").click(function () {
    $("#box").show(1000);
});
$("#hide").click(function () {
    $("#box").hide(1000);
});

jQuery 还提供了三种预设速度参数字符串：slow、normal 和 fast，
分别对应 600 毫秒、400 毫秒和 200 毫秒

$("#show").click(function () {
    $("#box").show("fast");
});
$("#hide").click(function () {
    $("#box").hide("slow");
});

可以在show()和hide()的基础上，实现动画队列的效果

$("#show").click(function () {
    $("#box").show("fast", function () {
        console.log("show");
    });
});
$("#hide").click(function () {
    $("#box").hide("slow", function () {
        console.log("hide");
    });
});

实现动画的切换 用toggle

$(document).click(function () {
    $("#box").toggle("slow");
});

二、卷动

<input type="button" id="up" value="Up"/>
<input type="button" id="down" value="Down"/>
<input type="button" id="toggle" value="Toggle"/>
<div style="background:red;width:200px;height:200px;" id="box"></div>

$("#up").click(function () {
    $("#box").slideUp("slow");
});
$("#down").click(function () {
    $("#box").slideDown("slow");
});
$("#toggle").click(function () {
    $("#box").slideToggle("slow");
});

PS : 用法和hide()、show()一样
三、淡入淡出

<input type="button" id="in" value="淡入"/>
<input type="button" id="out" value="淡出"/>
<input type="button" id="toggle" value="切换"/>
<div style="background:red;width:200px;height:200px;" id="box"></div>

$("#in").click(function () {
    $("#box").fadeIn("slow");
});
$("#out").click(function () {
    $("#box").fadeOut("slow");
});
$("#toggle").click(function () {
    $("#box").fadeToggle("slow");
});

PS ：淡入淡出从0~100，如果想固定到某个值，只能用fadeTo()

$(document).click(function () {
    $("#box").fadeTo(1000, 0.3);
});

四、自定义动画
先看一个同步动画

$("#box").click(function () {
    $(this).animate({
        "width" : "600px",
        "height" : "400px",
        "fontSize" : "200px",
        "opacity" : "0.2"
    });
});

animate(obj, time, callback)方法
obj 表示样式的对象
time 表示动画运动消耗的时间
callback 表示回调函数

$("#box").click(function () {
    $(this).animate({
        "width" : "600px",
        "height" : "400px",
        "fontSize" : "200px",
        "opacity" : "0.2"
    }, 200, function () {
        console.log("动画执行完毕");      // 动画执行完毕
    });
});

接下来，我们让div运动起来

<input type="button" value="运动"/>
<div style="position:absolute;background:red;width:100px;height:100px;" id="box"></div>

$("input").click(function () {
    $("#box").animate({
        "left" : "+=100px"
    });
})

动画队列有两种实现方法
第一种：依照顺序执行

$("input").click(function () {
    $("#box").animate({
        "left" : "+=1000px"
    });
    $("#box").animate({
        "left" : "-=1000px"
    });
});

第二种：通过连缀的形式

$("input").click(function () {
    $("#box").animate({
        "left" : "500px"
    }, 1000).animate({
        "top" : "500px"
    }, 1000).animate({
        "left" : "0px"
    }, 1000).animate({
        "top" : "0px"
    }, 1000);
});

第三种：通过回调函数

$("input").click(function () {
    $("#box").animate({
        "left" : "500px"
    }, 1000, function() {
        $("#box").animate({
            "top" : "500px"
        }, 1000, function () {
            $("#box").animate({
                "left" : "10px"
            }, 1000, function () {
                $("#box").animate({
                    "top" : "30px"
                }, 1000, function () {
                    alert("动画执行完毕");
                });
            });
        });
    });
});

五、列队动画方法
先来看一个例子
连缀不能够实现顺序队列

$("input").click(function () {
    $("#box").slideUp(1000).slideDown(1000).css("background", "orange");
});

这时，我们需要强行将css放在slideDown后面，使用回调函数来解决问题

$("input").click(function () {
    $("#box").slideUp(1000).slideDown(1000, function () {
        $(this).css("background", "orange");
    });
});

问题又来了，由于回调函数可读性差，一旦数量增加，就不友好了。
因此JQ提供了.queue()来实现队列

$("input").click(function () {
    $("#box").slideUp(1000).slideDown(1000).queue(function () {
        $(this).css("background", "orange");
    });
});

好了，我们现在再加一个动画

$("input").click(function () {
    $("#box").slideUp(1000).slideDown(1000).queue(function () {
        $(this).css("background", "orange");
    }).fadeOut();
});

这时，我们发现报错了！为什么呢？
是因为queue的特性导致的，我们只需要在queue传人next参数且在结尾加上next()方法即可

$("input").click(function () {
    $("#box").slideUp(1000).slideDown(1000).queue(function (next) {
        $(this).css("background", "orange");
        next();
    }).fadeOut("slow");
});

queue()动画队列还有一个作用，就是计算队列的长度，不过用的很少

function count () {
    return $("#box").queue("fx").length;
}
// 调用
$("#box").slideDown("slow", function () {
    alert(count());     // 1
});

清除队列

$("#box").slideUp(1000).slideDown(1000).queue(function (next) {
    $(this).css("background", "orange");
    next();
}).fadeOut("slow", function () {
    $(this).clearQueue();  // 清除了队列动画，后面的动画就不再执行了
}).fadeIn("slow");

六、动画相关的方法
许多时候我们并不想让动画执行完毕，而是中途停止掉
.stop()方法接受两个布尔参数，默认为false,
分别表示是否清除未执行的动画队列和是否直接跳转到最后的动画状态

<input type="button" value="运动"/>
<input type="button" value="停止" class="stop"/>
<div style="position:absolute;background:red;width:100px;height:100px;" id="box"></div>
$("input").click(function () {
    $("#box").animate({
        "left" : "500px"
    }, 1000).animate({
        "top" : "500px"
    }, 1000).animate({
        "left" : "0px"
    }, 1000).animate({
        "top" : "0px"
    }, 1000);
});
$(".stop").click(function () {
    $("#box").stop(true, false);
});

有时候，我们需要让动画延迟几秒之后，再运动

$("input").click(function () {
    $("#box").delay(3000).animate({
        "left" : "+=500px"
    });
});

最后，我们要做这样一个效果
点击运动按钮，动画进行不停的运动，点击停止按钮，让正在运行的动画停止

<input type="button" value="运动" class="start"/>
<input type="button" value="停止" class="stop"/>
<div style="position:absolute;background:red;width:100px;height:100px;" id="box"></div>

$(".start").click(function () {
    $("#box").slideToggle("slow", function () {
        $(this).slideToggle("slow", arguments.callee);
    });
});
$(".stop").click(function () {
    $("div:animated").stop().css("background", "blue");
});

七、动画全局属性
1.$.fx.interval 设置动画每秒运行的帧数，默认13,越小越流畅，但会影响性能

$.fx.interval = 1000;
$(".start").click(function () {
    $("#box").slideToggle("slow", function () {
        $(this).slideToggle("slow", arguments.callee);
    });
});

2.$.fx.off 关闭所有的动画效果，默认为false

$(".start").click(function () {
    $("#box").slideToggle("slow", function () {
        $(this).slideToggle("slow", arguments.callee);
    });
});
$(".stop").click(function () {
    $.fx.off = true;
});

3.animate()中的第三个参数，easing表示运动方式，swing(缓冲)，linear(匀速)，默认为swing

$(".start").click(function () {
    $("#box").animate({
        "left" : "+=500px"
    }, "slow", "swing");
});
$(".stop").click(function () {
    $("#box").animate({
        "left" : "-=500px"
    }, "slow", "linear");
});