原生JavaScript实现jQuery中的fadeIn和fadeOut淡入/出效果

本文链接：https://blog.csdn.net/Rao_Limon/article/details/90056416

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

四、最终效果

五、修改后的最终版本

/*
 * 参数说明
 * element:需要淡入的元素
 * speed:淡入速度,正整数(可选)
 */
window.Fade = (function() {
	// 定义Fade对象,外部访问接口对象
	var Fade = {
		fadeIn: function(elemt, speed) { //【 上拉接口 】
			TimerManager.creatObject(fadeIn, elemt, speed);
			return this;
		},
		fadeOut: function(elemt, speed) { //【 下拉接口 】
			TimerManager.creatObject(fadeOut, elemt, speed);
			return this;
		},
		fadeToggle: function(elemt, speed) { //【 滑动切换接口 】
			TimerManager.creatObject(fadeToggle, elemt, speed);
			return this;
		}
	};

	// II.构造对象记录计时器和动画状态
	// 1） 定时器管理器构造函数
	function TimerManager(args) {
		this.func = args[0];
		this.elemt = args[1];
		this.speed = args[2] != 0 && args[2] != undefined && args[2] != null ? args[2] : 500;
		this.isStart = false;
	}
	// 2）定时器管理器的静态方法：为element添加一个TimerManager实例
	TimerManager.creatObject = function(funcName, elemt, speed) {
		// 如果elemt对象没有TimerManager属性,或者该属性值不是TimerManager,则就为其添加或更换一个
		if(!elemt.TimerManager || elemt.TimerManager.constructor != TimerManager) {
			elemt.TimerManager = new TimerManager(arguments);
		}
		// 判断该elemt对象的计时器是否启动,如果没有启动，则启动，并执行动画，执行完毕之后修改计时器状态
		if(!elemt.TimerManager.isStart) {
			if(elemt.TimerManager.func.constructor != funcName) {
				elemt.TimerManager.func = funcName;
			}
			elemt.TimerManager.isStart = true;
			elemt.TimerManager.func(elemt, speed)
		}
	}

	// III.执行函数
	// 1）淡入函数
	function fadeIn(elemt, speed) { //淡入 0 ~ 1
		if(getStyle(elemt, "display") == "none"){
			elemt.style.cssText = "display:block;opacity:0;";
			var speed = speed || 500; //执行总时间
			var timeSpeed = speed / 100; //速度
			
			var num = 0,opacNum;
			var timer = setInterval(function() {
				// 修改透明度
				opacNum = Number(elemt.style.opacity);
				elemt.style.opacity = opacNum + 0.01; 
				
				num += timeSpeed;
				if(num >= speed) {
					clearInterval(timer);
					elemt.TimerManager.isStart = false;
				}
			}, timeSpeed);
		} else {
			elemt.TimerManager.isStart = false;
		}
	}
	// 2）淡出函数
	function fadeOut(elemt, speed) { //淡出 1 ~ 0
		if(getStyle(elemt, "display") == "block"){
			var speed = speed || 500; //执行总时间
			var timeSpeed = speed / 100; //速度
			var num = 0,opacNum;
			var timer = setInterval(function() {
				// 修改透明度
				opacNum = Number(elemt.style.opacity) || Number(getStyle(elemt, "opacity"));
				elemt.style.opacity = opacNum - 0.01; 
				num += timeSpeed;
				if(num >= speed) {
					clearInterval(timer);
					elemt.TimerManager.isStart = false;
					elemt.style.cssText = "display:none";
				}
			}, timeSpeed);
		} else {
			elemt.TimerManager.isStart = false;
		}
	}
	// 3）切换函数
	function fadeToggle(elemt, speed) { //切换
		var speed = speed || 16.6; //默认速度为16.6ms
		if(getStyle(elemt, "display") == "none"){
			fadeIn(elemt, speed);
		}else if(getStyle(elemt, "display") == "block"){
			fadeOut(elemt, speed);
		}
	}
	return Fade;
})();

结果演示