“ FadeIn”和“ FadeOut”不起作用

Question

我創建了兩個名為“ FadeIn”和“ FadeOut”的函數，因為我無法使用jQuery，但是它們不起作用，我不知道為什么。 他們將不透明度直接設置為0或1，而無需逐步進行設置。 這是代碼：

function fadeIn(el){
    var val = 0;
    document.getElementById(el).style.opacity = val;
    function fade(){
        val += .1;
        document.getElementById(el).style.opacity = val;
        if (val < 1){
            setTimeout(fade(), 90);
        }
    }
    fade();   
}

function fadeOut(el){
    var val = 1;
    document.getElementById(el).style.opacity = val;
    function fade(){
        val -= .1;
        document.getElementById(el).style.opacity = val;
        if (val > 0){
            setTimeout(fade(), 90);
        }
    }
    fade();   
}

Answer 1

你很親近 當您將fade()而不是fade作為第一個參數時，該函數將調用自身，而setTimeout()執行任何操作。 這應該工作：

function fadeIn(el){
    var val = 0;
    document.getElementById(el).style.opacity = val;
    function fade(){
        val += .1;
        document.getElementById(el).style.opacity = val;
        if (val < 1){
            setTimeout(fade, 90); // A Small fix to your code
        }
    }
    fade();
}

fadeOut()將以相同的方式修復。