banner

纯Javascript实现淡入淡出效果

说到js的渐变显示与消失,多数朋友会想到JQuery里面的fadeIn()、fadeOut()或fadeToggle()。

但如果仅仅是为了引入这样的一个效果,而去调用了庞大JQuery库,会不会显得有些累赘了?

所以,我简单的研究了一下纯js代码写淡入淡出的效果。

【需求分析】

淡入淡出的效果,其实就是一个setInterval(),加上循环的DOM操作,通过改变element对象节点的透明度,即可实现这种效果。

从分析,提取出两个必要的东西:setInterval()、opacity。

淡入的逻辑:opacity的值从0到1的float数值变化。

淡出的逻辑:opacity的值从1到0的float数值变化。

有了上面的分析以后,在进行代码中的实践操作。

【淡入效果】

为了方便以后使用,第一步,创建一个函数。(这里就从基本函数开始,暂且不说创建面向对象)

function show() {
    //body
}

函数创建完毕以后,还需要将要操作的element放进去。第二步,添加一个参数:

/**
 * 淡入
 * @param {Object} obj 需要操作的element
 */
function show(obj) {
    //body
}

为达到效果,那么opacity的数值变化此处应该是在递增,所以,创建一个记录数值的变量。第三步,添加一个变量:

/**
 * 淡入
 * @param {Object} obj 需要操作的element
 */
function show(obj) {
    var num = 0;
}

第四步,创建setInterval():

/**
 * 淡入
 * @param {Object} obj 需要操作的element
 */
function show(obj) {
    var num = 0;
    var st = setInterval(function(){
        num++;
        obj.style.opacity = num/10;
        if (num>=10) {
            clearInterval(st);
        }
    },30);
}


OK,一个简单粗暴的淡出效果完成了,按照上面的步骤,淡出就是num从10递减至0,基本上是雷同的。


当这个效果暂时实现以后,有些东西并没有那么简单。如果发生多次的触发效果,会出现setInterval被多次同时使用,出现一些让人头疼的BUG。

要解决这个问题,目前有一个方案:添加一个全局状态,防止多次触发setInterval。

这里我就不再啰嗦的分析为啥要这么般写了,上面淡入已经有了最简单的分析,淡出的函数基本上雷同

/**
 * 淡出效果
 * @param {Object} obj
 */
var flag = true;
function hide(obj){
    var num = 10;
    if (flag) {
        var st = setInterval(function(){
            num--;
            flag = false;
            obj.style.opacity = num/10;
            if (num<=0) {
                clearInterval(st);
                flag = true;
            }
        },30);
    }
}

下面这个是我写好的一个类的javascript代码,大家可以直接复制过去用:

var Fadeflag = true;
function Fade() {
	/**
	 * 淡入效果
	 * @param {Object} obj
	 */
	this.show = function(obj) {
		var num = 0;
	    if (Fadeflag) {
	        var st = setInterval(function(){
	            num++;
	            Fadeflag = false;
	            obj.style.opacity = num/10;
	            if (num>=10) {
	                clearInterval(st);
	                Fadeflag = true;
	            }
	        },30);
	    }
	}
	/**
	 * 淡出效果
	 * @param {Object} obj
	 */
	this.hide = function(obj) {
		var num = 10;
	    if (Fadeflag) {
	        var st = setInterval(function(){
	            num--;
	            Fadeflag = false;
	            obj.style.opacity = num/10;
	            if (num<=0) {
	                clearInterval(st);
	                Fadeflag = true;
	            }
	        },30);
	    }
	}
}

使用方法:

//导入上面的代码放在前面
var fade = new Fade();
fade.show(obj); //淡入
fade.hide(obj); //淡出

关于淡入淡出的toggle()函数,我这里暂时没时间研究了,涉及了检测元素是否显示,需要有时间研究一下。

阅读: 14715
在同意共创许可协议(CC BY-NC-SA-4.0)的前提下,您可以转载本文。
橙色阳光
https://oss.so/article/54

留言评论

4条留言
橙色阳光
讲真,我现在的淡入淡出都是用css3+setTimeout了,用这个方案也是当年的一些想法。
dh
不错不错,谢谢分享
朱海涛自媒体
写的很好,支持一下
香港vps
虽然用Javascript实现起来不是很难但是如果叫我自己完成的话,可能一次性完成不了