jQuery淡入淡出效果 – 淡入效果fadeTo

淡入淡出fadeIn与fadeOut都是修改元素样式的opacity属性,但是他们都有个共同的特点,变化的区间要么是0,要么是1

fadeIn:淡出效果,即要显示出来,opacity是0到1
fadeOut:淡入效果,即要隐藏出来,opacity是1到0

如果要让元素保持动画效果,执行opacity = 0.5的效果时,要如何处理?

如果不考虑CSS3,我们用JS实现的话,基本就是通过定时器,在设定的时间内一点点的修改opacity的值,最终为0.5,原理虽说简单,但是总不如一键设置这么舒服,jQuery提供了fadeTo方法,可以让改变透明度一步到位

语法

.fadeTo( duration, opacity [, complete ] )

必需的 duration参数规定效果的时长。它可以取以下值:”slow”、”fast” 或毫秒。fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。可选的 callback 参数是该函数完成后所执行的函数名称。

发表评论

电子邮件地址不会被公开。 必填项已用*标注