前言
一提到淡入淡出效果,大家可能会想到jQuery的fadeIn(),fadeOut()和fadeToggle()函数,它们被封装到库中,很方便被调用。但是有时候只为了一个简单的淡入淡出效果,并不需要去调用庞大的jQuery库,所以,下面我们用纯js代码实现淡入淡出的效果。
需求分析
要实现淡入淡出效果,就是要使用到setInterval()函数,改变element节点透明度opacity,来解决这个问题。
功能实现
fadeIn()和fadeOut()都有三个参数,分别是事件(必填),淡入淡出速度(正整数,可选),最后是透明度值(0~1,可选)。所以我们先编写html的内容和淡入的函数声明。
<!-- html -->
<button onclick="btnIn()">淡入</button> //点击实现淡入功能
<button onclick="btnOut()">淡出</button> //点击实现淡出功能
<div id="div1" style="width:80px;height:80px;background-color:green;opacity: 1;"></div>
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);
}
不知道你有没有发现,以上代码没有经过判断就进行了淡入/淡出,这是不符合常理的,所以我们加入一个判断,让它不会一直进行淡入/淡出。最后代码如下:
<!-- html -->
<button onclick="btnIn()">淡入</button>
<button onclick="btnOut()">淡出</button>
<div id="div1" style="width:80px;height:80px;background-color:green;opacity: 1;"></div>
//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);
}
以上代码可以直接复制过去使用了,下面是效果图