所有 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",500);
3) 第3组
$().slideUp(500);
$().animate({"height":"0",500);
在实际开发中，由于前 3 种动画形式都属于内置动画，它们的使用有很大的限制，因此我们更倾向于使用“自定义动画”的形式来实现各种动画效果。
通过深入剖析 jQuery 动画的本质，可能很多小伙伴都会有“柳暗花明又一村”的感觉。在学习过程中，只有深入探析技术的本质，才能让我们对知识的理解和记忆更加深刻。也只有这样，才能让我们的技术水平更上一层楼。如果只知其然而不知其所以然，技术就可能永远卡在某个瓶颈。在这一点上，笔者有过非常深刻的体会。
