说到js的渐变显示与消失，多数朋友会想到JQuery里面的fadeIn()、fadeOut()或fadeToggle()。
但如果仅仅是为了引入这样的一个效果，而去调用了庞大JQuery库，会不会显得有些累赘了？
所以，我简单的研究了一下纯js代码写淡入淡出的效果。
【需求分析】
淡入淡出的效果，其实就是一个setInterval()，加上循环的DOM操作，通过改变element对象节点的透明度，即可实现这种效果。
从分析，提取出两个必要的东西：setInterval()、opacity。
淡入的逻辑：opacity的值从0到1的float数值变化。
淡出的逻辑：opacity的值从1到0的float数值变化。
有了上面的分析以后，在进行代码中的实践操作。
【淡入效果】
为了方便以后使用，第一步，创建一个函数。（这里就从基本函数开始，暂且不说创建面向对象）
function show() {
//body}
函数创建完毕以后，还需要将要操作的element放进去。第二步，添加一个参数：
/**
* 淡入
* @param {Object} obj 需要操作的element
*/function show(obj) {
//body}
为达到效果，那么opacity的数值变化此处应该是在递增，所以，创建一个记录数值的变量。第三步，添加一个变量：
/**
* 淡入
* @param {Object} obj 需要操作的element
*/function show(obj) {
var num = 0;}
第四步，创建setInterval():
/**
* 淡入
* @param {Object} obj 需要操作的element
*/function show(obj) {
var num = 0;
var st = setInterval(function(){
num++;
obj.style.opacity = num/10;
if (num>=10) { clearInterval(st);
}
},30);}
OK,一个简单粗暴的淡出效果完成了，按照上面的步骤，淡出就是num从10递减至0，基本上是雷同的。
当这个效果暂时实现以后，有些东西并没有那么简单。如果发生多次的触发效果，会出现setInterval被多次同时使用，出现一些让人头疼的BUG。
要解决这个问题，目前有一个方案：添加一个全局状态，防止多次触发setInterval。
这里我就不再啰嗦的分析为啥要这么般写了，上面淡入已经有了最简单的分析，淡出的函数基本上雷同
/**
* 淡出效果
* @param {Object} obj
*/var flag = true;function hide(obj){
var num = 10;
if (flag) {
var st = setInterval(function(){
num--;
flag = false;
obj.style.opacity = num/10;
if (num<=0) { clearInterval(st);
flag = true;
}
},30);
}}
下面这个是我写好的一个类的JavaScript代码，大家可以直接复制过去用：
var Fadeflag = true;function Fade() {
/**
* 淡入效果
* @param {Object} obj
*/
this.show = function(obj) {
var num = 0;
if (Fadeflag) {
var st = setInterval(function(){
num++;
Fadeflag = false;
obj.style.opacity = num/10;
if (num>=10) {
clearInterval(st);
Fadeflag = true;
}
},30);
}
}
/**
* 淡出效果
* @param {Object} obj
*/
this.hide = function(obj) {
var num = 10;
if (Fadeflag) {
var st = setInterval(function(){
num--;
Fadeflag = false;
obj.style.opacity = num/10;
if (num<=0) {
clearInterval(st);
Fadeflag = true;
}
},30);
}
}}
使用方法：
//导入上面的代码放在前面var fade = new Fade();fade.show(obj); //淡入fade.hide(obj); //淡出
关于淡入淡出的toggle()函数，我这里暂时没时间研究了，涉及了检测元素是否显示，需要有时间研究一下。
