淡入纯 javascript 无效。为什么？

Question

我在这里找到了这段代码：。这是淡出功能。有效

var s = document.getElementById('thing').style;
s.opacity = 1;
(function fade(){(s.opacity-=.1)<0?s.display="none":setTimeout(fade,100)})();

var s = document.getElementById('thing').style;
s.opacity = 1;
(function fade(){(s.opacity-=.1)<0?s.display="none":setTimeout(fade,100)})();

#thing {
  background: red;
  line-height: 40px;
}

<div id="thing">I will fade...</div>

现在我正在尝试为 fadeIn 编写一个函数，如 fadeOut 函数。但是这个功能不起作用。我不明白为什么。

var s = document.getElementById('thing').style;
s.opacity = 0;
(function fade(){(s.opacity+=.1)>0.95?s.display="block":setTimeout(fade,100)})();

var s = document.getElementById('thing').style;
s.opacity = 0;
(function fade(){(s.opacity+=.1)>0.95?s.display="block":setTimeout(fade,100)})();

#thing {
  background: red;
  line-height: 40px;
}

<div id="thing">I will fade...</div>

Answer 1

你的情况的最佳解决方案是使用更多 CSS 而不是 JS，你可以将属性 transition 添加到 #thing 选择器，然后所有您需要做的是通过 JS 代码设置不透明度（无需添加超时或任何其他形式的复杂处理）

function hide() {
  document.getElementById('thing').style.opacity = 0
}

function show() {
  document.getElementById('thing').style.opacity = 1
}

#thing {
  transition: .4s
}

<div id="thing">I am showing up</div>
<button onclick="hide()">hide</button>
<button onclick="show()">show</button>

Answer 2

+= 正在尝试追加，因此请继续使用 -= 并将您的 .1 设置为负值 -0.1，它将起作用。

var s = document.getElementById('thing').style;
s.opacity = 0;
(function fade() {
    (s.opacity -= -0.1) < 1 && setTimeout(fade,100);
    }
)();

#thing{
  background: red;
  line-height: 40px;
  opacity: 0;
}

<div id="thing">I will fade...</div>

用 Chris G 的评论补充我的回答：

The opacity is a string, so appending 0.1 works the first time: "0" + "0.1" is "00.1" which checks out. Then it's "0.1" + 0.1 which is "0.10.1" and gets parsed back into "0.1" - Chris G

淡入纯 javascript 无效。为什么？

Fadein in pure javascript not working. Why?

javascript

fadeout

fadein