原生JS实现淡出淡入效果

最新推荐文章于 2024-01-20 09:05:19 发布

原创

最新推荐文章于 2024-01-20 09:05:19 发布 · 2.7k 阅读

收录于

本文介绍了如何不依赖jQuery，仅使用原生JavaScript实现元素的淡入淡出效果。通过setInterval()函数调整元素的opacity属性，创建fadeIn()和fadeOut()函数，实现了淡入淡出的动画效果，并在代码中加入了防止无限循环的判断逻辑。

前言

一提到淡入淡出效果，大家可能会想到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){

}