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

Question

所以我不久前问了这个问题，但最终从未解决这个问题。现在我有 10 个div，我需要一次淡入所有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);

代码笔

吉斯菲德尔

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);`