jQuery動畫的實現原理

在之前的學習中，我們接觸了以下 4 種 jQuery 動畫形式：

• 顯示與隱藏；
• 淡入與淡出；
• 滑上與滑下；
• 自定義動畫。

所有 jQuery 動畫從本質上來說，都是通過改變元素的 CSS 屬性值來實現的。換句話說，jQuery 動畫其實就是通過將元素的 CSS 屬性從“一個值”在一定時間內平滑地過渡到“另一個值”，從而實現動畫效果。

對於前 3 種動畫形式，實現的原理如下：

• 顯示與隱藏：通過改變 display、opacity、width、height 來實現；
• 淡入與淡出：通過改變 display、opacity 來實現；
• 滑上與滑下：通過改變 display、height 來實現。

實際上，這 3 種動畫形式就是使用 animate() 方法來實現的，只不過 jQuery 把它們封裝得更加簡單而已。

在下面 3 組程式碼中，每一組的兩行程式碼其實都是等價的。

1) 第 1 組

$().hide(500);
$().animate({"width":"0", "height":"0", "opacity":"0.0", "display":"none"},500);

2) 第 2 組

$().fadeOut(500);
$().animate({"opacity":"0.0", "display":"none"},500);

3) 第3組

$().slideUp(500);
$().animate({"height":"0", "display":"none"},500);

在實際開發中，由於前 3 種動畫形式都屬於內建動畫，它們的使用有很大的限制，因此我們更傾向於使用“自定義動畫”的形式來實現各種動畫效果。

通過深入剖析 jQuery 動畫的本質，可能很多小夥伴都會有“柳暗花明又一村”的感覺。在學習過程中，只有深入探析技術的本質，才能讓我們對知識的理解和記憶更加深刻。也只有這樣，才能讓我們的技術水平更上一層樓。如果只知其然而不知其所以然，技術就可能永遠卡在某個瓶頸。在這一點上，筆者有過非常深刻的體會。