Question

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

似乎<div>元素的不透明度经常被设置为0，当我调用淡入时，它只会在重置为0之前将其碰到.1。那就是＆＃39;至少是我的理论，因为我是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或使用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;
}

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

使用setTimeout（）的JavaScript计时事件

2 个答案: