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了,而且更为重要的是动画的优美感和适用性。

posted @ 2018-09-09 15:47  沉浮乡土  阅读(220)  评论(0编辑  收藏  举报