一提到淡入淡出效果，大家可能会想到jQuery的fadeIn(),fadeOut()和fadeToggle()函数，它们被封装到库中，很方便被调用。但是有时候只为了一个简单的淡入淡出效果，并不需要去调用庞大的jQuery库，所以，下面我们用纯js代码实现淡入淡出的效果。需要注意的是，obj.style.xxx 只能获取HTML标签中的style属性的样式信息，无法获取外联和内联中的样式信息。

二、需求分析

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

三、功能实现

3.1 HTML代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>原生JS实现jQuery淡入淡出效果</title>
        <script src="mainEvent.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            #testBox{
                width: 200px;
                height: 200px;
                background-color: #009E94;
                opacity: 1;
            }
        </style>
    </head>
    <body>
        <button id="fadeInBtn">淡入</button>
        <button id="fadeOutBtn">淡出</button>
        <button id="fadeToggleBtn">淡入/淡出</button>
        <div id="testBox"></div>
    </body>
</html>

3.2 JavaScript初始化代码

window.onload = function() {
	var fadeInBtn = document.getElementById("fadeInBtn");
	var fadeOutBtn = document.getElementById("fadeOutBtn");
	var fadeToggleBtn = document.getElementById("fadeToggleBtn");
	var testBox = document.getElementById("testBox")
	fadeInBtn.onclick = function() {
		fadeIn(testBox);
	}
	fadeOutBtn.onclick = function() {
		fadeOut(testBox);
	}
	fadeToggleBtn.onclick = function(){
		fadeToggle(testBox);
	}
}

3.3 JavaScirpt淡入效果 --- 仿jQuery中的fadeIn()函数

function fadeIn(elemt, speed) { //淡入 0 ~ 1
	if(elemt.style.opacity == 0 && elemt.style.opacity != "") {
		var speed = speed || 16.6; //默认速度为16.6ms
		var num = 0; //累加器
		var timer = setInterval(function() {
			num++;
			elemt.style.opacity = num / 20;
			if(num >= 20) {
				clearInterval(timer);
			}
		}, speed);
	}
}

3.4 JavaScirpt淡出效果 --- 仿jQuery中的fadeOut()函数

function fadeOut(elemt, speed) { //淡出 1 ~ 0
	if(elemt.style.opacity == 1 || elemt.style.opacity == "") {
		var speed = speed || 16.6; //默认速度为16.6ms
		var num = 20; //累剪器
		var timer = setInterval(function() {
			num--;
			elemt.style.opacity = num / 20;
			if(num == 0) {
				clearInterval(timer);
			}
		}, speed);
	}
}

3.5 JavaScript淡入/淡出效果 --- 仿jQuery中的fadeToggle()函数

function fadeToggle(elemt, speed) {
	var speed = speed || 16.6; //默认速度为16.6ms
	if(elemt.style.opacity == 0 && elemt.style.opacity != "") {
		var num = 0; //累加器
		var timer = setInterval(function() {
			num++;
			elemt.style.opacity = num / 20;
			if(num >= 20) {
				clearInterval(timer);
			}
		}, speed);
	}else if(elemt.style.opacity == 1 || elemt.style.opacity == "") {
		var num = 20; //累剪器
		var timer = setInterval(function() {
			num--;
			elemt.style.opacity = num / 20;
			if(num == 0) {
				clearInterval(timer);
			}
		}, speed);
	}
}

原生JavaScript实现jQuery淡入淡出效果

目录

一、前言