"通過使用 Javascript 設置不透明度來淡入元素"

Question

我決定使用 vanilla javascript 創建淡入淡出的動畫效果。

這是我的淡入效果代碼：

document.querySelector('.open-1_1').onclick = function() {

    document.getElementById('about-frame').style.display = 'block';     

    for (opacity = 0; opacity < 1.1; opacity = opacity + 0.1) 
    {           
        setTimeout(function(){document.getElementById('about').style.opacity = opacity;},100)                       
    }       
};

我想要做的是通過運行 for 循環逐漸增加 #about div 的不透明度從 0 到 1，該循環應該為循環的每次迭代等待 100 毫秒

然而，#about div 在一段時間后從黑暗變為不透明度 1，而沒有看到淡入效果。

我的邏輯有什么問題？

Answer 1

這個 for 循環沒有延遲，它設置了 100 毫秒內發生的十次超時。

for (opacity = 0; opacity < 1.1; opacity = opacity + 0.1) 
{           
    setTimeout(function(){document.getElementById('about').style.opacity = opacity;},100)                       
}  

所以淡入淡出只需要 1 毫秒。

另一方面，這會在一秒鍾內循環 MyFadeFunction 10 次，這正是您所要求的。

var opacity = 0;

function MyFadeFunction() {
   if (opacity<1) {
      opacity += .1;
      setTimeout(function(){MyFadeFunction()},100);
   }
   document.getElementById('about').style.opacity = opacity;
}

http://jsfiddle.net/dL02zqku/1/

注意本示例中的 var opacity和MyFadeFunction()是全局的，不是嵌套在啟動函數中，而是通過函數調用進行調用。 這是為了使用於調用該函數的 jquery 庫不會處於關閉狀態。

Answer 2

我嘗試了 Mr.Wayne 的代碼，它寫得很漂亮，但我試圖同時淡化很多東西，我可以看到我的瀏覽器在使用他的代碼時變慢了。 在嘗試了幾個選項后，我想出了這個：

function fading(){
    var increment = 0.045;
    var opacity = 0;
    var instance = window.setInterval(function() {
        document.getElementById('about').style.opacity = opacity
        opacity = opacity + increment;
        if(opacity > 1){
            window.clearInterval(instance);
        }
    },100)
}
fading();

您可以在 jsfiddle 上查看： https ://jsfiddle.net/b12yqo7v/

Answer 3

main = $('#main');
opacity = 0;
setOpacity(main) {
    if (this.opacity > 1) {
        main.css('opacity', 1);
        return;
    }
    setTimeout(() => {
        opacity += 0.2;
        main.css('opacity', opacity);
        setOpacity(main);
    }, 100);
}

Answer 4

    document.querySelector('.open-1_1').onclick = function () {
    document.getElementById('about-frame').style.display = 'block';
    const about = document.getElementById('about');
    let fade = setInterval(() => {
        about.style.opacity += .02; // 500 milliseconds
        if (about.style.opacity >= 1) {
            clearInterval(fade);
        }
    }, 10); // 100 iterations per second
};