精美而实用的网站，关注web编程技术、网站运营、SEO推广，让您轻松愉快的学习

青岛星网跟大家分享一个：纯Javascript淡入淡出封装函数，给单纯想使用淡入淡出效果而不想加载JQ的朋友用。淡入淡出的效果，其实就是一个setInterval()，加上循环的DOM操作，通过改变element对象节点的透明度，即可实现这种效果。

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

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

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

纯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); //淡出
Tags：Javascript 淡入 淡出 函数