jQuery笔记——动画设计——渐变效果

调整元素不透明度

浏览器兼容问题:

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:动画完成时执行的函数

fadeInfadeOut

通过改变透明度的值来实现;透明度为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元素,如果多个元素一起做动画效果,每执行一次回调匹配的元素,而不是作为一个整体动画的一次。

应用:




    
    设置淡出透明效果
    
    



jQuery笔记——动画设计——渐变效果_第1张图片

注意:fadeTo()只能作用于显示的元素,对隐藏元素无效。


三、渐变切换

fadeToggle;

fadeToggle([duration] , [callback])

fadeToggle([duration] , [easing] , [callback])

参数解释:

duration:一个字符串或数字,用来定义动画将运行多久

easing:一个用来表示使用哪个缓冲函数来过渡的字符串

callback:动画完成时执行的函数

持续时间以毫秒为单位,数值越大,动画越慢;fast :200ms  ,slow:600;

这个回调函数不设置任何参数,但是this是存在动画的DOM元素,如果多个元素一起做动画效果,每执行一次回调匹配的元素,而不是作为一个整体动画的一次。

应用:




    
    渐变切换
    
    




jQuery笔记——动画设计——渐变效果_第2张图片







你可能感兴趣的:(jQuery笔记——动画设计——渐变效果)