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

  • 相关阅读:
    理解 RESTful:理论与最佳实践
    Shiro 性能优化:解决 Session 频繁读写问题
    单点登录的三种实现方式
    理解 Spring(二):AOP 的概念与实现原理
    理解 Spring(一):Spring 与 IoC
    MFC查内存泄漏方法
    024 --- 第28章 访问者模式
    023 --- 第27章 解释器模式
    022 --- 第26章 享元模式
    021 --- 第25章 中介者模式
  • 原文地址:https://www.cnblogs.com/markniefeng/p/10561863.html
Copyright © 2020-2023  润新知