使用 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

这是一种淡化 dom 元素的奇怪且不常见的方法。我建议您使用 requestAnimationFrame 切换方法或使用 pure 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;
}

您可以根据自己的需要调整时间和曲线。