纯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()函数,我这里暂时没时间研究了,涉及了检测元素是否显示,需要有时间研究一下。

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

留言评论

4条留言
橙色阳光
讲真,我现在的淡入淡出都是用css3+setTimeout了,用这个方案也是当年的一些想法。
dh
不错不错,谢谢分享
朱海涛自媒体
写的很好,支持一下
香港vps
虽然用Javascript实现起来不是很难但是如果叫我自己完成的话,可能一次性完成不了
关于各种NPM问题,推荐使用Yarn,安装速度快,没用各种奇葩的错误,方便快捷。
收集的NodeJS代码片段: NodeJS Tools

最新留言

  • soshine 在《ZBlogPHP外链插件免费送!独家免费插件!》中留言
    很好的插件,如果能更自动化一点就好了,自动将淘宝客外链转换成对应的文章ID形式。
  • 橙色阳光 在《纯Javascript实现淡入淡出效果》中留言
    讲真,我现在的淡入淡出都是用css3+setTimeout了,用这个方案也是当年的一些想法。
  • 橙色阳光 在《基于jQuery的简易幻灯插件 - OsSliderJS》中留言
    讲真,这段JS大家不要看了……
  • BeautifulDays 在《三年了,我依然还在》中留言
    兴趣变工作,工作成为一种乐趣。这也蛮好的啊,工作之余可以在优化自己的博客,在博客上分享自己的一些心得、知识,毕竟,博客,现在已经越来越多的被今日头条,新浪微博,腾讯微博、微信公众号等第三方自营体APP取代了。能坚持下去的真不容易。给你一个赞!
  • 柒柒 在《移动端Touch事件preventDefault以后影响click事件触发的不科学解决方案》中留言
    先赞再说
  • 大谋 在《Chrome内核对css中rem大小单位文本font-size处理BUG参考解决方案》中留言
    还是你这里好看