原生JavaScript实现淡入淡出效果

前言

一提到淡入淡出效果，大家可能会想到jQuery的fadeIn(),fadeOut()和fadeToggle()函数，它们被封装到库中，很方便被调用。但是有时候只为了一个简单的淡入淡出效果，并不需要去调用庞大的jQuery库，所以，下面我们用纯js代码实现淡入淡出的效果。

需求分析

要实现淡入淡出效果，就是要使用到setInterval()函数，改变element节点透明度opacity，来解决这个问题。

功能实现

fadeIn()和fadeOut()都有三个参数，分别是事件（必填），淡入淡出速度（正整数，可选），最后是透明度值（0~1，可选）。所以我们先编写html的内容和淡入的函数声明。

 淡入   //点击实现淡入功能
 淡出   //点击实现淡出功能
 

function fadeIn(element,speed){/** 参数说明* element==>需要淡入的元素* speed==>淡入速度,正整数(可选)*/
 }
 function fadeOut(element,speed){}

下面是创建setInterval()函数：

function fadeIn(element，speed){var speed = speed || 30 ;var num = 0;var st = setInterval(function(){num++;element.style.opacity = num/10;if(num>=10)  {  clearInterval(st);  }},speed);
 }function btnIn(){fadeIn(div1,100);   //第二个参数是设置speed,默认为30，可自由修改
 }

以上就能实现一个简单的淡入功能了。同理，我们可以类似的将淡出功能也做出来。

function fadeOut(element){var speed = speed || 30 ;var num = 10;var st = setInterval(function(){num--;element.style.opacity = num / 10 ;if(num<=0)  {   clearInterval(st);  }},speed);
 }function btnOut(){fadeOut(div1,100);
 }

不知道你有没有发现，以上代码没有经过判断就进行了淡入/淡出，这是不符合常理的，所以我们加入一个判断，让它不会一直进行淡入/淡出。最后代码如下：

 淡入
 淡出
 

 

//JavaScript 
 function fadeIn(element,speed){if(element.style.opacity !=1){var speed = speed || 30 ;var num = 0;var st = setInterval(function(){num++;element.style.opacity = num/10;if(num>=10)  {  clearInterval(st);  }},speed);}
 }function fadeOut(element){if(element.style.opacity !=0){var speed = speed || 30 ;var num = 10;var st = setInterval(function(){num--;element.style.opacity = num / 10 ;if(num<=0)  {   clearInterval(st);  }},speed);}}function btnIn(){fadeIn(div1,100);
 }function btnOut(){fadeOut(div1,100);
 }

以上代码可以直接复制过去使用了，下面是效果图