摘要：參數(shù)代表回調(diào)函數(shù)。參數(shù)為變化樣式的對(duì)象必傳，速度可選，回調(diào)函數(shù)可選。這是，肯定會(huì)想到采用回調(diào)函數(shù)來(lái)解決。確實(shí)可以解決問(wèn)題，但是當(dāng)列隊(duì)動(dòng)畫(huà)變多時(shí)，回調(diào)函數(shù)的可讀性大大降低確實(shí)一個(gè)非常煩人的問(wèn)題。提供了一個(gè)類似于回調(diào)函數(shù)的方法。

動(dòng)畫(huà)可以給網(wǎng)站的用戶體驗(yàn)加分，讓網(wǎng)頁(yè)更加活潑。不過(guò)，什么東西都需要適量，簡(jiǎn)易快捷的動(dòng)畫(huà)會(huì)給網(wǎng)站加分不少。比如購(gòu)物網(wǎng)站的個(gè)人中心按鈕hover效果啊，各種hover產(chǎn)生的動(dòng)畫(huà)等。不過(guò)，現(xiàn)在CSS3的新特性可以模擬很多動(dòng)畫(huà)，可以多用CSS3去實(shí)現(xiàn)一些動(dòng)畫(huà)效果了。比如box-shadow，text-shaow，animation，transform等。jquery作為全明星級(jí)別插件，是有很強(qiáng)的動(dòng)畫(huà)功能的。

jQuery在動(dòng)畫(huà)中提供了兩個(gè)全局屬性（不常在代碼中使用），分別為：
$.fx.interval，設(shè)置每秒運(yùn)行的幀數(shù)，默認(rèn)13ms，越小越流暢，但太小耗費(fèi)瀏覽器性能
$.fx.off，關(guān)閉頁(yè)面上所有的動(dòng)畫(huà)，瀏覽器不支持動(dòng)畫(huà)時(shí)可以全部關(guān)掉。

$.fx.interval = 100; //默認(rèn)為13
$.fx.off = true; //默認(rèn)false

那么，我們看看jquery都提供了哪些動(dòng)畫(huà)方法。

jQuery 中顯示方法為：.show(speed,callback)，隱藏方法為：.hide(speed,callback)。在無(wú)參數(shù)的時(shí)候，只是硬性的顯示內(nèi)容和隱藏內(nèi)容。

$(".show").click(function () { 
    $(".xzavier").show();
});
$(".hide").click(function () { 
    $(".xzavier").hide();
});

兩個(gè)可選參數(shù)。參數(shù)speed，毫秒，表示運(yùn)動(dòng)所花時(shí)間，用速度來(lái)說(shuō)更切合動(dòng)畫(huà)一詞。可以是number，也可以是這個(gè)三個(gè)參數(shù)字符串：slow、normal 和fast，分別對(duì)應(yīng)600ms、400 ms和200ms。如果傳參錯(cuò)誤或者不傳，默認(rèn)normal，即400ms。參數(shù)callback代表回調(diào)函數(shù)。

$(".show").click(function () {
    $(".xzavier").show("fast"); 
});
$(".show").click(function () {
    $(".xzavier").show("");   //normal
});

$(".show").click(function () {
    $(".xzavier").show("fast", function () {
        console.log("animation is over");  //其他可執(zhí)行代碼
    });
});

原理上，.hide(speed,callback)方法其實(shí)就是在行內(nèi)設(shè)置CSS 代碼：display:none; 而.show(speed,callback)方法要根據(jù)原來(lái)元素是區(qū)塊還是內(nèi)聯(lián)來(lái)決定，如果是區(qū)塊，則設(shè)置CSS 代碼：display:block; 如果是內(nèi)聯(lián)，則設(shè)置CSS 代碼：display:inline。

.show()和.hide()的在同一元素的時(shí)候，需要一個(gè)按鈕切換操作，或者需要進(jìn)行一些條件判
斷。而jQuery 提供給我們一個(gè)類似功能的獨(dú)立方法：.toggle(speed,callback)，自動(dòng)切換。

$(".toggle").click(function () {
    $(this).toggle("fast");
});

jQuery 提供了一組改變?cè)馗叨鹊姆椒ǎ?slideUp(speed,callback)，向上收縮、.slideDown(speed,callback)，向下展開(kāi)和.slideToggle(speed,callback)，自動(dòng)切換。

$(".slidedown").click(function () {
    $(".xzavier").slideDown("slow");
});
$(".slideup").click(function () {
    $(".xzavier").slideUp();
});
$(".slidetoggle").click(function () {
    $(".xzavier").slideToggle("fast");
});

jQuery 提供了一組專門(mén)用于透明度變化的方法：.fadeIn(speed,callback)，淡入、.fadeOut(speed,callback)，淡出、.fadeToggle(speed,callback)，自動(dòng)切換。

$(".fadein").click(function () {
    $(".xzavier").fadeIn("slow");
});
$(".fadeout").click(function () {
    $(".xzavier").fadeOut();
});
$(".fadetoggle").click(function () {
    $(".xzavier").fadeToggle("fast");
});

這三個(gè)方法只能透明度變化只能從0 到100，或者從100 到0。不能自己設(shè)定變化到一個(gè)值。不過(guò)，jQuery提供了.fadeTo(speed,opacity，callback)方法解決了這個(gè)問(wèn)題。

$(".fadeto").click(function () {
    $(".xzavier").fadeTo("1000", 0.4); //0.4代表上面方法的30
});

如果本身透明度大于指定值，會(huì)淡出，否則相反。

jQuery提供了幾種簡(jiǎn)單常用的固定動(dòng)畫(huà)方法供開(kāi)發(fā)使用。隨著業(yè)務(wù)邏輯的復(fù)雜，這些簡(jiǎn)單動(dòng)畫(huà)無(wú)法滿足我們更加復(fù)雜的需求。這時(shí)，開(kāi)發(fā)可以使用jQuery提供了一個(gè).animate(params,speed,easing,callback);方法來(lái)創(chuàng)建我效果更為復(fù)雜的自定義動(dòng)畫(huà)。
參數(shù)為：CSS變化樣式的對(duì)象（必傳），速度（可選），回調(diào)函數(shù)（可選）。easing后面解釋。

.xzavier {width:200px;height:100px;opacity:1;}
$(".animate").click(function () {
    $(".xzavier").animate({
        "width" : "800px",
        "height" : "400px",
        "opacity" : 0.3
    });
});

class為xzavier的盒子多重動(dòng)畫(huà)同步運(yùn)動(dòng)。變寬，變長(zhǎng)，變淡。

$(".animate").click(function () {
    $(".xzavier").animate({
        "top" : "400px", 
        "left" : "200px"
    });
});

如果元素位置需要運(yùn)動(dòng)變化，需要設(shè)置元素的position為absolute。

jQuery還提供了自定義動(dòng)畫(huà)的累加、累減功能。

$(".animate").click(function () {
    $(".xzavier").animate({
        "top" : "+=100px",
        "left" : "+=100px"
    });
});

包括jquery固定的幾個(gè)動(dòng)畫(huà)在內(nèi)，都有可選參數(shù)easing，即運(yùn)動(dòng)方式，seasing有兩個(gè)值：swing(緩動(dòng))、linear(勻速)，默認(rèn)為swing。不過(guò)這個(gè)參數(shù)很少用到O(∩_∩)O~

$(".animate").click(function () {
    $(".xzaiver").animate({
        left : "800px"
    }, "slow", "swing");
    $(".xzavier").animate({
        top : "40px"
    }, "fast", "linear");
});

自定義實(shí)現(xiàn)列隊(duì)動(dòng)畫(huà)的方式，有3種：
1.在回調(diào)函數(shù)中再執(zhí)行一個(gè)動(dòng)畫(huà)

$(".animate").click(function () {
    $(".xzavier").animate({
        "left" : "800px"
    }, function () {
        $(".xzavier").animate({
            "top" : "400px"
        }, function () {
            $(".xzavier").animate({
                "opacity" : 0.3
            });
        });
    });
});

2.通過(guò)連綴來(lái)實(shí)現(xiàn)列隊(duì)動(dòng)畫(huà)

$(".animate").click(function () {
    $(".xzavier").animate({
        "left" : "800px"
    }).animate({
        "top" : "400px"
    }).animate({
        "opacity" : 0.3
    });
});

3.通過(guò)順序來(lái)實(shí)現(xiàn)列隊(duì)動(dòng)畫(huà)（需要時(shí)同一元素動(dòng)畫(huà)，否則，就是同步動(dòng)畫(huà)）

$(".animate").click(function () {
    $(".xzavier").animate({"left" : "100px"});
    $(".xzavier").animate({"top" : "100px"});
    $(".xzavier").animate({"opacity" : 0.3});
});

這樣來(lái)看，我們更傾向于后面兩種寫(xiě)法，因?yàn)榍短锥嗔司统霈F(xiàn)了}}}}}}}}}}

先看個(gè)問(wèn)題：

//連綴
$(".xzavier").slideUp().slideDown().css("background", "#ccc");

這里面css方法并不是動(dòng)畫(huà)方法，不會(huì)排在列隊(duì)之后執(zhí)行，但是，我們又需要它在前面動(dòng)畫(huà)執(zhí)行之后再執(zhí)行。這是，肯定會(huì)想到采用回調(diào)函數(shù)來(lái)解決。

$(".xzavier").slideUp().slideDown(function () {
    $(this).css("background", "#ccc");
});

確實(shí)可以解決問(wèn)題，但是當(dāng)列隊(duì)動(dòng)畫(huà)變多時(shí)，回調(diào)函數(shù)}}}}}}}}}}的可讀性大大降低確實(shí)一個(gè)非常煩人的問(wèn)題。jQuery 提供了一個(gè)類似于回調(diào)函數(shù)的方法：.queue()。.queue()方法將css方法跟隨動(dòng)畫(huà)方法之后。如果還需繼續(xù)調(diào)用動(dòng)畫(huà)方法，使用.dequeue()方法。

$(".xzavier").slideUp();
$(".xzavier").slideDown();
$(".xzavier").queue(function () {
    $(this).css("background", "#ccc");
    $(this).dequeue();
})
$(".xzavier").hide("slow");

停止正在運(yùn)行中的動(dòng)畫(huà)：.stop()方法。可選參數(shù)：clearQueue, gotoEnd。clearQueue 傳遞一個(gè)布爾值，代表是否清空未執(zhí)行完的動(dòng)畫(huà)列隊(duì)，gotoEnd 代表是否直接將正在執(zhí)行的動(dòng)畫(huà)跳轉(zhuǎn)到末狀態(tài)。

$(".stop").click(function () {
    $(".xzavier").stop(true ,true);
});

延遲執(zhí)行動(dòng)畫(huà)：.delay()方法。可以在動(dòng)畫(huà)之前設(shè)置延遲，也可以在列隊(duì)動(dòng)畫(huà)設(shè)置。

$(".animate").click(function () {
    $(".xzavier").delay(1000).animate({
        "opacity" : 0.3
    }, 1000);
    $(".xzavier").delay(1000).animate({
        "width" : "800px"
    }, 1000);
    $(".xzavier").animate({
        "height" : "400px"
    }, 1000);
});

周末好天氣，打籃球去咯。代碼，籃球，生活...