我正在尝试div使用纯 JavaScript为 a 制作淡出效果。
这是我目前使用的：
//Imagine I want to fadeOut an element with id = "target"
function fadeOutEffect()
{
var fadeTarget = document.getElementById("target");
var fadeEffect = setInterval(function() {
if (fadeTarget.style.opacity < 0.1)
{
clearInterval(fadeEffect);
}
else
{
fadeTarget.style.opacity -= 0.1;
}
}, 200);
}
div 应该会平滑地淡出，但它会立即消失。
怎么了？我该如何解决？
最初当没有设置不透明度时，该值将是一个空字符串，这将导致您的算术失败。也就是说，"" < 0.1 == true您的代码进入clearInterval分支。
您可以将其默认为 1，它会起作用。
function fadeOutEffect() {
var fadeTarget = document.getElementById("target");
var fadeEffect = setInterval(function () {
if (!fadeTarget.style.opacity) {
fadeTarget.style.opacity = 1;
}
if (fadeTarget.style.opacity > 0) {
fadeTarget.style.opacity -= 0.1;
} else {
clearInterval(fadeEffect);
}
}, 200);
}
document.getElementById("target").addEventListener('click', fadeOutEffect);#target {
height: 100px;
background-color: red;
}<div id="target">Click to fade</div>在进行算术和比较时，一个空字符串似乎被 JavaScript 视为 0（即使在 CSS 中它将该空字符串视为完全不透明）
> '' < 0.1
> true
> '' > 0.1
> false
> '' - 0.1
> -0.1
更简单的方法 我们现在可以使用CSS transitions以更少的代码实现淡出
const target = document.getElementById("target");
target.addEventListener('click', () => target.style.opacity = '0');
// If you want to remove it from the page after the fadeout
target.addEventListener('transitionend', () => target.remove());#target {
height: 100px;
background-color: red;
transition: opacity 1s;
}<p>Some text before<p>
<div id="target">Click to fade</div>
<p>Some text after</p>就在今天早上，我在http://vanilla-js.com找到了这段代码，它非常简单、紧凑且快速：
var s = document.getElementById('thing').style;
s.opacity = 1;
(function fade(){(s.opacity-=.1)<0?s.display="none":setTimeout(fade,40)})();
您可以通过更改setTimeOut函数中的第二个参数来更改淡入淡出的速度。
看起来你可以用另一种方式来做（我可能错了）。
event.target.style.transition = '0.8s';
event.target.style.opacity = 0;
您可以使用 CSS 过渡属性而不是在 javascript 中执行 vai 计时器。与您正在做的事情相比，这更注重性能。
查看
function fadeOutEffect() {
var fadeTarget = document.getElementById("target");
var fadeEffect = setInterval(function () {
if (!fadeTarget.style.opacity) {
fadeTarget.style.opacity = 1;
}
if (fadeTarget.style.opacity > 0) {
fadeTarget.style.opacity -= 0.1;
} else {
clearInterval(fadeEffect);
}
}, 200);
}
document.getElementById("target").addEventListener('click', fadeOutEffect);#target {
height: 100px;
background-color: red;
}<div id="target">Click to fade</div>