原生JS实现淡入淡出效果(fadeIn/fadeOut/fadeTo)

来源：互联网发布：javascript好的书籍编辑：程序博客网时间：2024/05/16 12:53

转载地址:http://mrthink.net/js-fadein-fadeout-fadeto/

淡入淡出效果,在日常项目中经常用到,可惜原生JS没有类似的方法,而有时小的页面并不值得引入一个jQuery库,所以就自己写了一个,已封装, 有用得着的朋友, 可以直接使用. 代码中另附有一个设置元素透明度的方法, 是按IE规则(0~100)设置, 若改成标准设置方法(0.00~1.00), 下面使用时请考虑浮点精确表达差值.
参数说明:
fadeIn()与fadeOut()均有三个参数,第一个是事件, 必填; 第二个是淡入淡出速度, 正整数, 大小自己权衡, 可选参数; 第三个, 是指定淡入淡出到的透明度值(类似于jQuery中的fadeTo()), 0~100的正整数值, 也是可选参数.
核心代码及演示: 查看样例演示

/淡入效果(含淡入到指定透明度)02function fadeIn(elem, speed, opacity){03    /*04     * 参数说明05     * elem==>需要淡入的元素06     * speed==>淡入速度,正整数(可选)07     * opacity==>淡入到指定的透明度,0~100(可选)08     */09    speed = speed || 20;10    opacity = opacity || 100;11    //显示元素,并将元素值为0透明度(不可见)12    elem.style.display = 'block';13    iBase.SetOpacity(elem, 0);14    //初始化透明度变化值为015    var val = 0;16    //循环将透明值以5递增,即淡入效果17    (function(){18        iBase.SetOpacity(elem, val);19        val += 5;20        if (val <= opacity) {21            setTimeout(arguments.callee, speed)22        }23    })();24}25 26//淡出效果(含淡出到指定透明度)27function fadeOut(elem, speed, opacity){28    /*29     * 参数说明30     * elem==>需要淡入的元素31     * speed==>淡入速度,正整数(可选)32     * opacity==>淡入到指定的透明度,0~100(可选)33     */34    speed = speed || 20;35    opacity = opacity || 0;36    //初始化透明度变化值为037    var val = 100;38    //循环将透明值以5递减,即淡出效果39    (function(){40        iBase.SetOpacity(elem, val);41        val -= 5;42        if (val >= opacity) {43            setTimeout(arguments.callee, speed);44        }else if (val < 0) {45            //元素透明度为0后隐藏元素46            elem.style.display = 'none';47        }48    })();49}