这次给大家带来js封装淡入淡出功能函数，js封装淡入淡出功能函数的注意事项有哪些，下面就是实战案例，一起来看一下。
说到js的渐变显示与消失，多数朋友会想到jquery里面的fadein()、fadeout()或fadetoggle()。但如果仅仅是为了引入这样的一个效果，而去调用了庞大jquery库？或者说我通过用原生js实现一些函数来提高自己~
所以，我简单的研究了一下纯js代码写淡入淡出的效果。
如果出现错误，请在评论中指出，我也好自己纠正自己的错误
（一）fadein淡入函数
淡入淡出的效果，其实就是一个setinterval()，加上循环的dom操作，通过改变element对象节点的透明度，即可实现这种效果。
所以我们提取出两个必要的东西：setinterval()、opacity、以及speed。
speed ： 这个是我们设置opacity的值从0到1的float数值变化速度
淡入的逻辑：opacity的值从0到1的float数值变化。
html:
<p id="p1"></p><span id="span1">123</span><button>fadein</button><button>fadeout</button>
css样式
<style> p {  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('p1'); fade.fadein(); }; btn2.onclick = () => {  let fade = new fade('p1');  fade.fadeout(); }
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
vue+storejs处理获取数据
vue-router内query动态传参如何处理
以上就是js封装淡入淡出功能函数的详细内容。