使用setTimeout（）的JavaScript时间事件

Question

我正在尝试使用seTimeout（）淡出，然后在页面滚动时返回<div>元素。 fadeOut()可以正常工作，但fadeIn()只能达到0.1的不透明度。

好像<div>元素的不透明度始终设置为0，当我调用“淡入”时，它只会在将其重置为0之前将其提高到.1。至少这是我的理论，因为JS的新手，在解决这个问题时遇到了问题。

码：

function fadeOut() {
    console.log("fade out: " + document.getElementById('quotes').style.opacity)
    if(document.getElementById('quotes').style.opacity > .11) {
        document.getElementById('quotes').style.opacity -= .1;
        fadeDelay = setTimeout('fadeOut()',100);
    } else {
        document.getElementById('quotes').style.opacity = 0;
        console.log("stopped fade out.");
    }
}

function fadeIn() {
    console.log("fade in: " + document.getElementById('quotes').style.opacity)
    if(document.getElementById('quotes').style.opacity < .9) {
        document.getElementById('quotes').style.opacity += .1;
        fadeDelay = setTimeout('fadeIn()',100);
    } else {
        document.getElementById('quotes').style.opacity = 1;
        console.log("stopped fade in.");
    }
}

Answer 1

style.opacity返回一个字符串，+ =联系该字符串而不是增加值

尝试这个

function fadeIn() {
console.log("fade in: " + document.getElementById('quotes').style.opacity)
var opacity = Number(document.getElementById('quotes').style.opacity)
if(document.getElementById('quotes').style.opacity < 0.9) {
    document.getElementById('quotes').style.opacity = opacity + 0.1;
    fadeDelay = setTimeout('fadeIn()',100);
} else {
    document.getElementById('quotes').style.opacity = 1;
    console.log("stopped fade in.");
}
}

Answer 2

这是淡淡dom元素的怪异且罕见的方法。 我建议您使用requestAnimationFrame或纯CSS切换方法。

在这种情况下，使用css是最快，最轻和最简单的工作方式。 然后，您将得到以下内容：

的CSS

#quotes {
    -webkit-transition: opacity 0.5s ease-out;
    transition: opacity 0.5s ease-out;
}

JS

var quotes = document.getElementById("quotes");

function fadeIn() {
    quotes.style.opacity = 1;
}

 function fadeOut() {
    quotes.style.opacity = 0;
}

您可以根据自己的需要来选择时间和曲线。