Question

所以我不久前问过这个问题，但从未结束这个问题。现在我有10个div，我需要一次淡入，但具有不同的不透明度值。我一直在玩它但是没有运气让每个人都以不同的不透明度淡出。现在我让它立刻褪色所有的盒子到100％的不透明度。我现在只需要不同的不透明度值。这是原始代码，但添加了数组。请不要jquery，只需要核心JavaScript。

var color;

var count = 0;

var colorOpac = [0.2, 0.7, 0.3, 0.9, 0.6, 0.1, 0.4, 0.8, 0.5, 0.2];

function init() {
    color = document.querySelectorAll(".box");
    setInterval(fadeColor, 1000);

}

function fadeColor() {
    setInterval(fade, 50);
}

function fade() {
    for(i=0; i<color.length;i++){
     color[i].style.opacity = count;

}
    count = count + 0.01;
}

window.addEventListener("load", init, false);

Answer 1

尝试创建一个单独的功能模块，用于处理如下所示的淡入淡出操作。

(function(window){

    function fadeManager(ele,opacity){
        this.opacity = 0;       
        this.opacityLimit = opacity;
        this.ele = ele;
        //console.log(this.ele,this.opacity);
        this.initFade();
    }

    fadeManager.prototype.initFade = function(){        
        this.interval = setInterval(this.fade, 50, this);       
    }

    fadeManager.prototype.fade = function(self) {
        console.log(self.ele,self.opacity);
        if(self.opacity < self.opacityLimit){
           self.ele.style.opacity = self.opacity;
           self.opacity = self.opacity + 0.01;
        }
        else{
            clearInterval(self.interval);    
        }
    }

    window.fadeManager = fadeManager;
})(window);

然后将您的代码更改为以下内容，

    var color;        
    var count = 0;

    var colorOpac = [0.2, 0.4, 0.3, 0.1, 0.6, 0.1, 0.4, 0.8, 0.5, 0.2];

    function init() {
        color = document.querySelectorAll(".box"); 
        for(i=0; i<color.length;i++){
            // this will init fade in operation.
            var fade = new fadeManager(color[i],colorOpac[i]);
        }
    }

    window.addEventListener("load", init,false);

CodePEN

JSFIDDLE

Answer 2

以防万一有兴趣。我还找到了一种方法，可以在使用它之后再使用3个函数。在这里！

var color;

var count = 0;

var colorOpac = [0.2, 0.7, 0.3, 1, 0.6, 0.1, 0.4, 0.8, 0.5, 0.2];

function init() {
    color = document.querySelectorAll(".box");
    setInterval(fadeColor, 1000);

}

function fadeColor() {
    setInterval(fade, 50);
}

function fade() {
    for(i=0; i <color.length;i++){

    if(count < colorOpac[i]){
        color[i].style.opacity = count;
    }
}
    count = count + 0.01;
}

window.addEventListener("load", init, false);`

JavaScript div以不同的不透明度级别淡入

2 个答案: