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

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

//淡入效果(含淡入到指定透明度)
function fadeIn(elem, speed, opacity){
	/*
	 * 参数说明
	 * elem==>需要淡入的元素
	 * speed==>淡入速度,正整数(可选)
	 * opacity==>淡入到指定的透明度,0~100(可选)
	 */
    speed = speed || 20;
    opacity = opacity || 100;
	//显示元素,并将元素值为0透明度(不可见)
    elem.style.display = 'block';
    iBase.SetOpacity(elem, 0);
	//初始化透明度变化值为0
    var val = 0;
	//循环将透明值以5递增,即淡入效果
    (function(){
        iBase.SetOpacity(elem, val);
        val += 5;
        if (val <= opacity) {
            setTimeout(arguments.callee, speed)
        }
    })();
}

//淡出效果(含淡出到指定透明度)
function fadeOut(elem, speed, opacity){
	/*
	 * 参数说明
	 * elem==>需要淡入的元素
	 * speed==>淡入速度,正整数(可选)
	 * opacity==>淡入到指定的透明度,0~100(可选)
	 */
    speed = speed || 20;
    opacity = opacity || 0;
    //初始化透明度变化值为0
    var val = 100;
	//循环将透明值以5递减,即淡出效果
    (function(){
        iBase.SetOpacity(elem, val);
        val -= 5;
        if (val >= opacity) {
            setTimeout(arguments.callee, speed);
        }else if (val < 0) {
			//元素透明度为0后隐藏元素
            elem.style.display = 'none';
        }
    })();
}
共有 23 条评论.

发表评论39,026 Views

  1. summarypotato

    iBase?原生?

    [回复]

  2. 铺子人

    btns[0] 这个是什么意思

    如何定位那个按钮使用效果啊(列子的会)

    如果我换成 a 标签,使用onmousemove,怎么确定那个a用效果

    有口吃,不知道博主懂意思了没有

    [回复]

  3. JS新手,问一下iBase是什么意思?调用这个函数如果直接onClick要怎么写?看不懂你的Demo

    [回复]

  4. 网络小辉

    楼主,你的淡入淡出函数是怎么解决IE8下PNG黑框BUG的呢???求教~

    [回复]

  5. 这个方法在元素是绝对定位且元素为整屏时,在IE6,7下很卡。请教一下是什么问题。

    [回复]

  6. 正好用到呢

    [回复]

  7. 没有fadeTo啊

    [回复]

    yaojaa 回复:

    @yaojaa, 有,我看错了。不好意思哈,我以为是moveTo呢

    [回复]

  8. 能否解释下 arguments.callee 是什么意思,有点看不懂!

    [回复]

    Mr.Think 回复:

    @yaojaa, arguments总知道吧,callee属性是返回正在执行的函数对象,也就是所在函数(比如本文中是当前的匿名函数)的正文.

    [回复]

    yaojaa 回复:

    @Mr.Think, 貌似明白了,就是调用外层的函数,递归。 聪明啊 我都是在写一遍

    [回复]

  9. 效果还可以

    [回复]

  10. iBase.SetOpacity这个函数在哪边呢?

    [回复]

    Mr.Think 回复:

    @zjcoder, 请参见样例演示源码 http://mrthink.net/demo/ijs20110127.htm

    [回复]

    ttyytyt 回复:

    @Mr.Think, 详细的述说

    [回复]

  11. Uh Oh! 404 error!~~示例貌似链接错了?

    [回复]

    Mr.Think 回复:

    @老饕, 抱歉,链接少写一个字母.已修正…

    [回复]

  12. 正好在研究这个效果,不过我是使用srollTop来实现高度的变化,没有透明度的内容。

    [回复]

    Mr.Think 回复:

    @Bazzinga! Design, 你说的是类似于jQ的slideDown/slideUp方法吧. 那个可以先写一个获取元素实际高度的方法,然后再处理这个高度变化.

    [回复]

发表评论[无需注册]


渔夫科技