说到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(); }
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
react-native封装插件swiper使用步骤详解
fifo/lru实现缓存算法
以上就是原生js封装淡入淡出效果函数步骤详解的详细内容。