盒子
盒子
文章目录󰁋
  1. 显隐
  2. 滑动
  3. 渐变:通过改变不透明度
  4. 自定义:

jQuery动画基础(四)

介绍jQuery动画

  • JavaScript语言本身不支持动画设计,必须通过改变`CSS来实现动画效果。

    显隐

  • 显隐动画

    • show():显示

      • show()从上到下增加元素的高度,从左到右增加元素宽度,从0到1增加透明度,直至内容完全可见
    • hide():隐藏

      • hide()通过改变元素的高度宽度和不透明度,直到这三个属性值到0
    • 参数

      • show()
      • show(speed,callback)

        • speed: 字符串或数字,表示动画将运行多久(slow=0.6/normal=0.4/fast=0.2
        • callback: 动画完成时执行的方法
    • 显示和隐藏式一对密不可分的动画形式。

  • 显隐切换

    • toggle():切换元素的可见状态

      • 原理:匹配元素的宽度、高度以及不透明度,同时进行动画,隐藏动画后将display设置为none

      • 参数:

        • toggle(speed)
        • toggle(speed,callback)
        • toggle(boolean)

          • speed: 字符串或数字,表示动画将运行多久(slow=0.6/normal=0.4/fast=0.2
          • easing: 使用哪个缓冲函数来过渡的字符串(linear/swing)
          • callback: 动画完成时执行的方法
          • boolean:true为显示 false为隐藏

滑动

  • 显隐滑动效果

    • slideDown():滑动隐藏
    • slidUp():滑动显示

    • 参数:

      • slideDown(speed,callback)
      • slidUp(speed,callback)
  • 显隐切换滑动

    • slideToggle():显隐滑动切换

    • 参数:

      • slidUp(speed,callback)

渐变:通过改变不透明度

  • 淡入淡出

    • fadeIn()
    • fadeOut()

    • 参数

      • fadeIn(speed,callback)
      • fadeOut(speed,callback)
  • 设置淡出透明效果

    • fadeTo():以渐进的方式调整到指定透明度

    • 参数

      • fadeTo(speed,opacity,callback)
  • 渐变切换:

    • 结合fadeInfadeOut
    • fadeToggle()

    • 参数:

      • fadeOut(speed,callback)

自定义:

  • 自定义动画:animate()

  • animate模拟show():

    • show: 表示由透明到不透明
    • toggle: 切换
    • hide:表示由显示到隐藏
支持一下
扫一扫,支持poetries