说到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:
css样式
div {
width: 100px;
height: 100px;
background-color: #1d7db1;
opacity:0;
}
首先我们来看fadeIn函数的第一版的写法：先了解一下实现的思路
{
num += speed;
ele.style.opacity = num / 100;
if (num >= 100) {
clearInterval(time); // 清楚定时器
}
},30);
}
}
当这个效果暂时实现以后，有些东西并没有那么简单。如果发生多次的触发效果，会出现setInterval被多次同时使用，出现一些让人头疼的BUG。
要解决这个问题，目前有一个方案：添加一个全局状态，防止多次触发setInterval。
{
num += speed;
Fadeflag = false;
ele.style.opacity = num / 100;
if (num >= 100) {
clearInterval(time);
Fadeflag = true;
}
},30);
}
}
兼容性问题！！！
先看代码
注：代码设置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数值变化。
封装函数
{ // 兼容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 fade = new Fade('div1');
fade.fadeIn();
};
btn2.onclick = () => {
let fade = new Fade('div1');
fade.fadeOut();
}
总结
以上所述是小编给大家介绍的javascript原生封装一个淡入淡出效果的函数测试实例代码。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
