前言
一提到淡入淡出效果,大家可能会想到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>
- 1
- 2
- 3
- 4
function fadeIn(element,speed){