jQuery—动画总结
引言
动画效果绚丽多彩,视觉冲击可以使得网页交互时具有很好的吸引力。
常用动画
-
hide()和show()
同时修改多个样式属性(高度、宽度及透明度),这是非常基础的一对动画,常常联合起来一起使用,显示或隐藏一些元素,非常方便。
-
fadeIn()和fadeOut()
只改变透明度,fadeIn()实现的功能是在一段时间内增加元素的不透明度,fadeOut()则相反。
-
slideUp()和slideDown()
只改变元素的高度。slideUp()实现元素由下到上缩短显示,slideDown()实现元素由上到下延伸显示。
-
fadeTo()
只改变透明度。可以把元素的不透明度以渐进的方式改变到指定值。
-
toggle()
切换元素的可见状态。可以用于替代hide()和show()。
-
slideToggle()
通过高度的变化切换匹配元素的可见性。可以用于替代slideUp()和slideDown()。
-
fadeToggle()
通过不可见度的变化切换匹配元素的可见性。可以用于替代fadeIn()和fadeOut()。
万能动画
animate():自定义动画,可以实现任何动画,关键是其参数的设置。
- 一组元素上的动画效果
- 当一个animate()中使用多个属性时,动画是同时的。
- 采用链式法来写则是顺序动画。
- 多组元素上的动画效果
- 默认动画是同时发生的。
- 采用回调形式应用动画时则是按照回调顺序发生的。
总结
动画虽然丰富,但是也要体现动画的功能性,不能为了动画而动画,否则是没有必要的,如果可以直接采用css动画就能完成的就没必要使用JS了,而且更为重要的是动画的优美感和适用性。