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

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

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

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

那么，我們看看jquery都提供了哪些動畫方法。

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

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

兩個可選參數(shù)。參數(shù)speed，毫秒，表示運(yùn)動所花時間，用速度來說更切合動畫一詞?？梢允莕umber，也可以是這個三個參數(shù)字符串：slow、normal 和fast，分別對應(yīng)600ms、400 ms和200ms。如果傳參錯誤或者不傳，默認(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)方法其實就是在行內(nèi)設(shè)置CSS 代碼：display:none; 而.show(speed,callback)方法要根據(jù)原來元素是區(qū)塊還是內(nèi)聯(lián)來決定，如果是區(qū)塊，則設(shè)置CSS 代碼：display:block; 如果是內(nèi)聯(lián)，則設(shè)置CSS 代碼：display:inline。

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

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

jQuery 提供了一組改變元素高度的方法：.slideUp(speed,callback)，向上收縮、.slideDown(speed,callback)，向下展開和.slideToggle(speed,callback)，自動切換。

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

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

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

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

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

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

jQuery提供了幾種簡單常用的固定動畫方法供開發(fā)使用。隨著業(yè)務(wù)邏輯的復(fù)雜，這些簡單動畫無法滿足我們更加復(fù)雜的需求。這時，開發(fā)可以使用jQuery提供了一個.animate(params,speed,easing,callback);方法來創(chuàng)建我效果更為復(fù)雜的自定義動畫。
參數(shù)為：CSS變化樣式的對象（必傳），速度（可選），回調(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的盒子多重動畫同步運(yùn)動。變寬，變長，變淡。

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

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

jQuery還提供了自定義動畫的累加、累減功能。

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

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

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

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

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

2.通過連綴來實現(xiàn)列隊動畫

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

3.通過順序來實現(xiàn)列隊動畫（需要時同一元素動畫，否則，就是同步動畫）

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

這樣來看，我們更傾向于后面兩種寫法，因為嵌套多了就出現(xiàn)了}}}}}}}}}}

先看個問題：

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

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

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

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

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

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

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

延遲執(zhí)行動畫：.delay()方法?？梢栽趧赢嬛霸O(shè)置延遲，也可以在列隊動畫設(shè)置。

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

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