一提到淡入淡出效果，大家可能会想到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 ~ 1if(elemt.style.opacity == 0 && elemt.style.opacity != "") {var speed = speed || 16.6; //默认速度为16.6msvar 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 ~ 0if(elemt.style.opacity == 1 || elemt.style.opacity == "") {var speed = speed || 16.6; //默认速度为16.6msvar 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.6msif(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 ~ 1if(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 ~ 0if(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.6msif(getStyle(elemt, "display") == "none"){fadeIn(elemt, speed);}else if(getStyle(elemt, "display") == "block"){fadeOut(elemt, speed);}}return Fade;
})();

结果演示

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

原生JavaScript实现jQuery中的slideUp和slideDown滑动效果
参考文章:用原生JavaScript写出类似jQuery中slideUp和slideDown效果_johnworks的博客-CSDN博客作者:johnworks 目录一.前言二.第一次尝试 ...
原生js实现fadein 和 fadeout淡入淡出效果
用法: $("button").click(function(){ $("p").fadeOut(); }); fadeOut() 方法逐渐改变被选元素的不透明 ...
原生javascript取代jquery的一些方法（jQuery-free）
转自:http://www.qingdou.me/2687.html jQuery是最流行的JavaScript工具库.据统计,目前全世界57.3%的网站使用它.也就是说,10个网站里面,有6个使用j ...
流程代码中js报错，在javaScript或者jQuery中字符串比较没有equals()方法
问题: 流程走不下去. 原因: 在javaScript或者jQuery中字符串比较没有equals()方法,要比较两个字符串是否相等可以直接用==或者is()进行判断. //判断是否为未签约有风险等级 ...
html实现新闻滚动效果,jQuery实现新闻播报滚动及淡入淡出效果示例
这篇文章主要介绍了jQuery实现新闻播报滚动及淡入淡出效果,结合实例形式分析了基于jQuery插件的页面元素动态变换相关操作技巧,需要的朋友可以参考下本文实例讲述了jQuery实现新闻播报滚动及淡 ...
JavaScript或jQuery中使用键盘控制对象运动
<div id="monkey"><img src="img/monkey.png" ></div> 在JavaScript ...
演员选择框三级联动（原生javascript和jquery实现）
使用Jquery做成选择演员选择框的三级联动效果.代码如下,测试可以下载附件. <html><head><meta http-equiv="Content-Ty ...
JavaScript之jQuery够用即可（事件委托、动画效果、扩展插件）
文章目录一.事件委托二.JS的动画效果三.扩展插件一.事件委托 1.事件委托其实就是给对象绑定一个事件,但是委托给它所属的每一个子对象了,因此每一个子对象都具有添加进的功能书写格式如下: ...
原生JS及jQuery中事件委托的写法
在绑定节点事件处理程序时遇到的问题: 每个函数都是对象,都会占用内存:内存中的对象越多,性能就越差. 其次,必须事先指定所有事件处理程序而导致的 DOM访问次数,会延迟整个页面的交互就绪时间. 采 ...
表单美化-原生javascript和jQuery下拉列表（兼容IE6）
效果: 思想:用其他标签配合脚本和隐藏的input并通过传值模拟表单元素中的select <!DOCTYPE HTML> <html lang="en-US"&g ...

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

目录

一、前言