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

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

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

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

show / hide

直接以無(wú)參數(shù)形式調(diào)用show()和hide()，會(huì)顯示和隱藏DOM元素。但是，只要傳遞一個(gè)時(shí)間參數(shù)進(jìn)去，就變成了動(dòng)畫：

var div = $('#test-show-hide');
div.hide(3000); // 在3秒鐘內(nèi)逐漸消失

時(shí)間以毫秒為單位，但也可以是'slow'，'fast'這些字符串：

var div = $('#test-show-hide');
div.show('slow'); // 在0.6秒鐘內(nèi)逐漸顯示

toggle()方法則根據(jù)當(dāng)前狀態(tài)決定是show()還是hide()。

slideUp / slideDown

你可能已經(jīng)看出來(lái)了，show()和hide()是從左上角逐漸展開(kāi)或收縮的，而slideUp()和slideDown()則是在垂直方向逐漸展開(kāi)或收縮的。

slideUp()把一個(gè)可見(jiàn)的DOM元素收起來(lái)，效果跟拉上窗簾似的，slideDown()相反，而slideToggle()則根據(jù)元素是否可見(jiàn)來(lái)決定下一步動(dòng)作：

var div = $('#test-slide');
div.slideUp(3000); // 在3秒鐘內(nèi)逐漸向上消失

fadeIn / fadeOut

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

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

自定義動(dòng)畫

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

var div = $('#test-animate');
div.animate({
  opacity: 0.25,
  width: '256px',
  height: '256px'
}, 3000); // 在3秒鐘內(nèi)CSS過(guò)渡到設(shè)定值

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

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

實(shí)際上這個(gè)回調(diào)函數(shù)參數(shù)對(duì)于基本動(dòng)畫也是適用的。

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

animate()

串行動(dòng)畫

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

var div = $('#test-animates');
// 動(dòng)畫效果：slideDown - 暫停 - 放大 - 暫停 - 縮小
div.slideDown(2000)
  .delay(1000)
  .animate({
    width: '256px',
    height: '256px'
  }, 2000)
  .delay(1000)
  .animate({
    width: '128px',
    height: '128px'
  }, 2000);
}
</script>

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

為什么有的動(dòng)畫沒(méi)有效果

你可能會(huì)遇到，有的動(dòng)畫如slideUp()根本沒(méi)有效果。這是因?yàn)閖Query動(dòng)畫的原理是逐漸改變CSS的值，如height從100px逐漸變?yōu)?。但是很多不是block性質(zhì)的DOM元素，對(duì)它們?cè)O(shè)置height根本就不起作用，所以動(dòng)畫也就沒(méi)有效果。

此外，jQuery也沒(méi)有實(shí)現(xiàn)對(duì)background-color的動(dòng)畫效果，用animate()設(shè)置background-color也沒(méi)有效果。這種情況下可以使用CSS3的transition實(shí)現(xiàn)動(dòng)畫效果。

最新評(píng)論