javascript原生封装一个淡入淡出效果的函数

说到js的渐变显示与消失，多数朋友会想到JQuery里面的fadeIn()、fadeOut()或fadeToggle()。但如果仅仅是为了引入这样的一个效果，而去调用了庞大JQuery库？或者说我通过用原生js实现一些函数来提高自己~

所以，我简单的研究了一下纯js代码写淡入淡出的效果。

如果出现错误，请在评论中指出，我也好自己纠正自己的错误

author： thomaszhou

（一）FadeIn淡入函数

淡入淡出的效果，其实就是一个setInterval()，加上循环的DOM操作，通过改变element对象节点的透明度，即可实现这种效果。

所以我们提取出两个必要的东西：setInterval()、opacity、以及speed。

• speed： 这个是我们设置opacity的值从0到1的float数值变化速度
• 淡入的逻辑：opacity的值从0到1的float数值变化。

我们来先看代码实现！

html:

<div id="div1"></div>
<span id="span1">123</span>
<button>fadein</button>
<button>fadeOut</button>
复制代码

css样式

	<style>
		div {
			width: 100px;
			height: 100px;
			background-color: #1d7db1;
			opacity:0;
		}
	</style>
复制代码

首先我们来看fadeIn函数的第一版的写法：先了解一下实现的思路

function fadeIn(ele, speed) {
   let num = 0;
   let time = setInterval(() => {
        num += speed;
        ele.style.opacity = num / 100;
        if (num >= 100) {
          clearInterval(time);  // 清除定时器
        }
	  }, 30);
    }
}
复制代码

当这个效果暂时实现以后，有些东西并没有那么简单。如果发生多次的触发效果，会出现setInterval被多次同时使用，出现一些让人头疼的BUG。

要解决这个问题，目前有一个方案：添加一个全局状态，防止多次触发setInterval。

let Fadeflag = true;
function fadeIn(ele, speed) {
   let num = 0;
   if (Fadeflag) {
	  let time = setInterval(() => {
        num += speed;
        Fadeflag = false;
        ele.style.opacity = num / 100;
        if (num >= 100) {
          clearInterval(time);
          Fadeflag = true;
        }
	  }, 30);
    }
}
复制代码

兼容性问题！！！

先看代码

set: function(elem, num) {
    elem.style.opacity !== undefined ? elem.style.opacity = num / 100 : elem.style.filter = 'alpha(opacity = '+ num +')';
}
复制代码

注：代码设置num/100是因为我们以ie为标准去兼容ff和GG

js里面设置DOM节点透明度的函数属性：filter= "alpha(opacity=" + value+ ")"（兼容ie）

ie的filter范围是0~100

opacity=value/100（兼容FF和GG）。

FF和GG的opacity是0~1 （为了兼容ie的filter范围，我们用num/100）

（二）FadeOut淡出函数

• speed： 这个是我们设置opacity的值从1到0的float数值变化速度（记得考虑兼容性）
• 淡出的逻辑：opacity的值从1到0的float数值变化。

封装函数

(function() {
    let fadeFlag = true;

    function Fade(selector) {
        this.elem = typeof selector == 'Object' ? selector : document.getElementById(selector);
    }
    Fade.prototype = {
	    constructor: Fade,
        setOpacity: (elem, opacity) => {  // 兼容ie10—
            elem.filters ? elem.style.filter = 'alpha(opacity = '+ opacity +')':   elem.style.opacity = opacity / 100;
            return true;
	    },
	    setOpacity: function(num) {
            this.elem.style.opacity !== undefined ? this.elem.style.opacity = num / 100 : this.elem.style.filter = 'alpha(opacity = '+ num +')';
	    },
        fadeIn: function(speed, opacity){
	    /*
	    speed ==>淡入的速度，正整数（可选）;
	    opacity ==>淡入到指定的透明度，0～100（可选）;
            */
            speed = speed || 2;
            opacity = opacity || 100;

            let num = 0; // 初始化透明度变化值为0
            if (fadeFlag) {
                let time = setInterval(() => {
                    num += speed;
                    fadeFlag = false;
                    this.setOpacity(num);
                    this.elem.style.opacity !== undefined ? this.elem.style.opacity = num / 100 : this.elem.style.filter = 'alpha(opacity = '+ num +')';
                    if (num >= opacity) {
                        clearInterval(time);
                        fadeFlag = true;
                    }
                }, 20);
            }
        },
        fadeOut: function(speed, opacity) {
	    /*
	    speed ==>淡入的速度，正整数（可选）;
	    opacity ==>淡入到指定的透明度，0～100（可选）;
	    */
            speed = speed || 2;
            opacity = opacity || 0;

            let num = 100; // 初始化透明度变化值为0
            if (fadeFlag) {
                let time = setInterval(() => {
                    num -= speed;
                    fadeFlag = false;
                    this.set(num);
                    this.elem.style.opacity !== undefined ? this.elem.style.opacity = num / 100 : this.elem.style.filter = 'alpha(opacity = '+ num +')';
                    if (num <= opacity) {
                    clearInterval(time);
                    fadeFlag = true;
                    }
                }, 20);
            }
        }
    };
window.Fade = Fade;
})();
复制代码

测试实例：

  let btn = document.getElementsByTagName('button')[0];
  let btn2 = document.getElementsByTagName('button')[1];
  btn.onclick = () => {
    let fade = new Fade('div1');
	fade.fadeIn();
  };
  btn2.onclick = () => {
    let fade = new Fade('div1');
    fade.fadeOut();
  }
复制代码