'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()将以相同的方式修复。