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

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

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

讓我們先來看看jQuery內置的幾種動畫樣式：

show / hide

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

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

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

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

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

slideUp / slideDown

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

slideUp()把一個可見的DOM元素收起來，效果跟拉上窗簾似的，slideDown()相反，而slideToggle()則根據(jù)元素是否可見來決定下一步動作：

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

fadeIn / fadeOut

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

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

自定義動畫

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

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

animate()還可以再傳入一個函數(shù)，當動畫結束時，該函數(shù)將被調用：

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

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

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

animate()

串行動畫

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

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

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

為什么有的動畫沒有效果

你可能會遇到，有的動畫如slideUp()根本沒有效果。這是因為jQuery動畫的原理是逐漸改變CSS的值，如height從100px逐漸變?yōu)?。但是很多不是block性質的DOM元素，對它們設置height根本就不起作用，所以動畫也就沒有效果。

此外，jQuery也沒有實現(xiàn)對background-color的動畫效果，用animate()設置background-color也沒有效果。這種情況下可以使用CSS3的transition實現(xiàn)動畫效果。

最新評論