调整元素不透明度
浏览器兼容问题:
IE:支持filter滤镜集 ,opacity属性值范围:0(完全透明)—100(不透明)
非IE:支持style.opacity 属性,范围:0(完全透明)—1(不透明)
jQuery 为元素渐隐和渐显定义了3个方法:fadeIn()、fadeOut()、fadeTo()
一、淡入和淡出
fadeIn和fadeOut
fadeIn([duration] ,[callback])
fadeIn([duration] , [easing] , [callback])
fadeOut([duration] ,[callback])
fadeOut([duration] , [easing] , [callback])
参数解释:
duration:一个字符串或数字,用来定义动画将运行多久
easing:一个用来表示使用哪个缓冲函数来过渡的字符串
callback:动画完成时执行的函数
fadeIn和fadeOut:
通过改变透明度的值来实现;透明度为0时,display将会被设为none,以确保该元素不会影响页面布局。
持续时间以毫秒为单位,数值越大,动画越慢;fast :200ms ,slow:600;如果提供任何其他字符串,或者这个duration参数被忽略,默认使用400ms。
这个回调函数不设置任何参数,但是this是存在动画的DOM元素,如果多个元素一起做动画效果,每执行一次回调匹配的元素,而不是作为一个整体动画的一次。
应用:
淡入和淡出
隐藏提示:
雨,轻薄浅落,丝丝缕缕,幽幽怨怨。不知何时起,细腻的心莫名的爱上了阴雨天。也许,雨天是思念的风铃,雨飘下,铃更响。伸出薄凉的手掌,雨轻弹的滴落在掌心,凉意,遍布全身;怀念,张开翅膀;眼角已感润湿
注意:fadeIn()作用于隐藏元素
fadeOut()作用于显示元素
把所有匹配元素的不透明度以渐进的方式调整到指定的不透明度:fadeTo()
fadeTo(duration , opacity , [callback])
fadeTo(duration , opacity , [easing] [callback])
参数解释:
duration:一个字符串或数字,用来定义动画将运行多久
opacity:一个0—1之间的数字,表示目标透明度
easing:一个用来表示使用哪个缓冲函数来过渡的字符串
callback:动画完成时执行的函数
和其他效果方法不同,fadeTo()需要明确的指定duration参数
持续时间以毫秒为单位,数值越大,动画越慢;fast :200ms ,slow:600;如果提供任何其他字符串,或者这个duration参数被忽略,默认使用400ms。
这个回调函数不设置任何参数,但是this是存在动画的DOM元素,如果多个元素一起做动画效果,每执行一次回调匹配的元素,而不是作为一个整体动画的一次。
应用:
设置淡出透明效果
注意:fadeTo()只能作用于显示的元素,对隐藏元素无效。
三、渐变切换
fadeToggle;
fadeToggle([duration] , [callback])
fadeToggle([duration] , [easing] , [callback])
参数解释:
duration:一个字符串或数字,用来定义动画将运行多久
easing:一个用来表示使用哪个缓冲函数来过渡的字符串
callback:动画完成时执行的函数
持续时间以毫秒为单位,数值越大,动画越慢;fast :200ms ,slow:600;
这个回调函数不设置任何参数,但是this是存在动画的DOM元素,如果多个元素一起做动画效果,每执行一次回调匹配的元素,而不是作为一个整体动画的一次。
应用:
渐变切换