用JavaScript實作動畫，原理非常簡單：我們只需要以固定的時間間隔（例如，0.1秒），每次把DOM元素的CSS樣式修改一點（例如，高寬各增加10%），看起來就像動畫了。
但要用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來實現動畫效果。
相關推薦：
#以上是jQuery內建的幾種動畫樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！
