jQuery內置的幾種動畫樣式

但是要用JavaScript手動實現動畫效果，需要編寫非常復雜的代碼。如果想要把動畫效果用函數封裝起來便于復用，那考慮的事情就更多了。本文主要和大家分享jQuery內置的幾種動畫樣式。

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

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

show / hide

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

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

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

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

toggle()方法則根據當前狀態決定是show()還是hide()。

slideUp / slideDown

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

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

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

fadeIn / fadeOut

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

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

自定義動畫

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

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

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

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

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

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

animate()

串行動畫

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

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

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

為什么有的動畫沒有效果

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

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

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com