動畫
用JavaScript實現(xiàn)動畫，原理非常簡單：我們只需要以固定的時間間隔（例如，0.1秒），每次把DOM元素的CSS樣式修改一點（例如，高寬各增加10%），看起來就像動畫了。

但是要用JavaScript手動實現(xiàn)動畫效果，需要編寫非常復(fù)雜的代碼。如果想要把動畫效果用函數(shù)封裝起來便于復(fù)用，那考慮的事情就更多了。

使用jQuery實現(xiàn)動畫，代碼已經(jīng)簡單得不能再簡化了：只需要一行代碼！

讓我們先來看看jQuery內(nèi)置的幾種動畫樣式：

show/hide 顯示／隱藏

直接以無參數(shù)形式調(diào)用show()和hide()，會顯示和隱藏DOM元素
但是，只要傳遞一個時間參數(shù)進去，就變成了動畫：

var div = $('#test-show-hide');
div.hide(3000);//3秒中內(nèi)逐漸消息
時間以毫秒為單位，但也可以是'slow'，'fast'這些字符串：
var div = $('#test-show-hide');
div.show('slow'); // 在0.6秒鐘內(nèi)逐漸顯示
toggle()方法則根據(jù)當(dāng)前狀態(tài)決定是show()還是hide()

slideUp / slideDown 上滑隱藏／下滑出現(xiàn)

你可能已經(jīng)看出來了，show()和hide()是從左上角逐漸展開或收縮的，而slideUp()和slideDown()則是在垂直方向逐漸展開或收縮的。
slideUp()把一個可見的DOM元素收起來，效果跟拉上窗簾似的，slideDown()相反，而slideToggle()則根據(jù)元素是否可見來決定下一步動作：

var div = $('#test-slide');
div.slideUp(3000);

fadeIn / fadeOut 淡入淡出

fadeIn()和fadeOut()的動畫效果是淡入淡出，也就是通過不斷設(shè)置DOM元素的opacity屬性來實現(xiàn)，而fadeToggle()則根據(jù)元素是否可見來決定下一步動作：

var div = $('#test-fade');
div.fadeOut('slow'); // 在0.6秒內(nèi)淡出

自定義動畫 animate

如果上述動畫效果還不能滿足你的要求，那就祭出最后大招：animate()，它可以實現(xiàn)任意動畫效果，我們需要傳入的參數(shù)就是DOM元素最終的CSS狀態(tài)和時間，jQuery在時間段內(nèi)不斷調(diào)整CSS直到達到我們設(shè)定的值：

var div = $('#test-animate');
div.animate({
    opacity:0.25,
    width:'256px',
    height:'256px'
},3000);

animate()還可以再傳入一個函數(shù)，當(dāng)動畫結(jié)束時，該函數(shù)將被調(diào)用：

var div = $('#test-animate');
div.animate({
    opacity: 0.25,
    width: '256px',
    height: '256px'
}, 3000, function(){
    console.log('動畫已經(jīng)結(jié)束');
    //恢復(fù)之初始狀態(tài)
    $(this).css('opacity','1.0').css('width','126px').css('height','126px');
});

實際上這個回調(diào)函數(shù)參數(shù)對于基本動畫也是適用的。

有了animate()，你就可以實現(xiàn)各種自定義動畫效果了：

串行動畫

jQuery的動畫效果還可以串行執(zhí)行，通過delay()方法還可以實現(xiàn)暫停，這樣，我們可以實現(xiàn)更復(fù)雜的動畫效果，而代碼卻相當(dāng)簡單：

var div = $('#test-animates');
//動畫 滑下-暫停-放大-暫停-縮小
div.slideDown(2000).delay(1000).animate({
    width:'256px',
    height:'256px'
},2000).delay(1000).animate({
    width:'128px',
    height:'128px'
},2000);

因為動畫需要執(zhí)行一段時間，所以jQuery必須不斷返回新的Promise對象才能后續(xù)執(zhí)行操作。簡單地把動畫封裝在函數(shù)中是不夠的。

為什么有的動畫沒有效果

你可能會遇到，有的動畫如slideUp()根本沒有效果。這是因為jQuery動畫的原理是逐漸改變CSS的值，如height從100px逐漸變?yōu)?。但是很多不是block性質(zhì)的DOM元素，對它們設(shè)置height根本就不起作用，所以動畫也就沒有效果。
此外，jQuery也沒有實現(xiàn)對background-color的動畫效果，用animate()設(shè)置background-color也沒有效果。這種情況下可以使用CSS3的transition實現(xiàn)動畫效果。