JavaScript div淡入，不透明度级别不同

所以我在不久前问了这个问题，但最终没能解决这个问题。现在我有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);

---

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

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

---

以防万一有人感兴趣。我还找到了一种方法，使它只与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);`

---

没有jquery，哦，我知道，但是对于这个特定的例子，它必须是纯JavaScript。如果不是必须的话，我会使用CSS。由于并非每个浏览器都支持所有内容，因此只使用JS就更容易了。该示例中唯一的一点是，它们仍然以100%的不透明度淡入。div都需要从0开始，淡入到相应的不透明度值，并在达到该值时停止。所以最终的结果应该是所有的div一起淡入，但以不同的值停止，而不是全部以100%不透明度停止。是的，这是完美的工作。非常感谢你花时间帮我解决这个问题！