jQuery - 效果(四)之 淡入淡出

本文目录:

  1. fadeIn();
  2. fadeOut();
  3. fadeToggle();
  4. fadeTo()。

fadeIn(speed, callback)

给所选元素添加淡入效果。

参数 类型 描述
speed String/Number 可选。动画时长,预设值为 "slow"(600)、"normal"(默认值,400)、"fast"(200),也可自定义动画时长,单位为毫秒(如:1000)。
callback Function() 可选。动作完成后执行的函数。

fadeOut(speed, callback)

给所选元素添加淡出效果。

参数 类型 描述
speed String/Number 可选。动画时长,预设值为 "slow"(600)、"normal"(默认值,400)、"fast"(200),也可自定义动画时长,单位为毫秒(如:1000)。
callback Function() 可选。动作完成后执行的函数。

fadeToggle(speed, easing, callback)

fadeToggle() 方法是 fadeIn() 方法和 fadeOut() 方法的结合,既能给元素添加淡入效果,又能给元素添加淡出效果。

参数 类型 描述
speed String/Number 可选。动画时长,预设值为 "slow"(600)、"normal"(默认值,400)、"fast"(200),也可自定义动画时长,单位为毫秒(如:1000)。
easing String 可选。过渡动画的类型,预设值为 "linear"、"swing"(默认值)。
callback Function() 可选。动作完成后执行的函数。

fadeTo(speed, opacity, easing, callback)

fadeTo() 方法允许所选元素淡入/淡出至给定的不透明度(值介于 0 与 1 之间)。

参数 类型 描述
speed String/Number 可选。动画时长,预设值为 "slow"(600)、"normal"(默认值,400)、"fast"(200),也可自定义动画时长,单位为毫秒(如:1000)。
opacity Number 必选。不透明度,取值范围:0 至 1。
easing String 可选。过渡动画的类型,预设值为 "linear"、"swing"(默认值)。
callback Function() 可选。动作完成后执行的函数。

代码:




    
    效果_淡入淡出
    
    


效果演示:

jQuery - 效果(四)之 淡入淡出_第1张图片
淡入淡出.gif

你可能感兴趣的:(jQuery - 效果(四)之 淡入淡出)