jQuery—动画总结

引言

动画效果绚丽多彩，视觉冲击可以使得网页交互时具有很好的吸引力。

---

常用动画

• hide()和show()

同时修改多个样式属性（高度、宽度及透明度），这是非常基础的一对动画，常常联合起来一起使用，显示或隐藏一些元素，非常方便。

• fadeIn()和fadeOut()

只改变透明度，fadeIn()实现的功能是在一段时间内增加元素的不透明度，fadeOut()则相反。

• slideUp()和slideDown()

只改变元素的高度。slideUp()实现元素由下到上缩短显示，slideDown()实现元素由上到下延伸显示。

• fadeTo()

只改变透明度。可以把元素的不透明度以渐进的方式改变到指定值。

• toggle()

切换元素的可见状态。可以用于替代hide()和show()。

• slideToggle()

通过高度的变化切换匹配元素的可见性。可以用于替代slideUp()和slideDown()。

• fadeToggle()

通过不可见度的变化切换匹配元素的可见性。可以用于替代fadeIn()和fadeOut()。

---

万能动画

animate():自定义动画，可以实现任何动画，关键是其参数的设置。

• 一组元素上的动画效果

1. 当一个animate()中使用多个属性时，动画是同时的。
2. 采用链式法来写则是顺序动画。

• 多组元素上的动画效果

1. 默认动画是同时发生的。
2. 采用回调形式应用动画时则是按照回调顺序发生的。

---

总结

动画虽然丰富，但是也要体现动画的功能性，不能为了动画而动画，否则是没有必要的，如果可以直接采用css动画就能完成的就没必要使用JS了，而且更为重要的是动画的优美感和适用性。