JavaScript div淡入不同的不透明度水平

所以我剛纔問這個問題，但從來沒有結束這個工作。現在我有10個div，我需要一次褪色，但具有不同的不透明度值。我一直在玩它，但沒有運氣讓每個人都淡入淡出。現在我已經把所有的盒子一下子褪去100％的不透明度。我只需要不同的不透明度值即可工作。這是原始代碼，但添加了數組。沒有jquery的請求，這隻需要成爲核心JavaScript。JavaScript div淡入不同的不透明度水平

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

來源

2014-03-02 user3331125

*無jQuery，請* < - 我喜歡這個，但你可以做，使用純CSS，就有點過殺人，雖然 –

哦，我知道這一點，但對於這個具體的例子，它必須是純JavaScript。如果不需要，我會用CSS。由於並非所有瀏覽器都支持，所以使用JS更容易。而不是必須在所有時間加回落 – user3331125

試着創建一個單獨的功能模塊來處理下面的淡入淡出操作。

(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

來源

2014-03-02 18:40:58

這個例子唯一的例子是它們仍然全部淡入到100％的不透明度。 divs都需要從0開始，並淡入相應的不透明度值，並在達到該值時停止。所以最終的產品應該是所有的div一起褪色，但停止在不同的價值，並不是所有的停止在100％的不透明度。 – user3331125

@ user3331125檢查我更新的代碼。 –

@ user3331125它是否按預期工作？ –

萬一有人感興趣。我還找到了一種方法，讓它在使用它之後僅使用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);`

來源

2014-03-06 18:51:16 user3331125

JavaScript div淡入不同的不透明度水平

回答

相關問題