我有一个div，我试图将文本淡入其中。
2
941function fadeIn(divNum) {
let id = null;
fadeDiv = document.getElementById("jsTest");
fadeDiv.innerHTML = "";
console.log(fadeDiv.style.opacity);
if (divNum == 1) {
fadeDiv.innerHTML = "一些文本";
} else if (divNum == 2 ) {
fadeDiv.innerHTML = "一些不同的文本";
} else if (divNum == 3) {
fadeDiv.innerHTML = "仍然不同的文本";
} else {
fadeDiv.innerHTML = "糟糕！这不应该发生";
}
clearInterval(id);
id = setInterval(moveIt,100);
function moveIt() {
if (fadeDiv.style.opacity == 1) {
clearInterval(id);
} else {
fadeDiv.style.opacity += 0.1;
console.log(fadeDiv.style.opacity);
}
}
}
<div style="opacity: 0;" id="jsTest"></div> <button class="boxButtonsb" onmouseover="fadeIn(1)">JavaScript测试</button>
当我鼠标悬停时，不透明度只减少了.1，看起来就像是永远循环在那里。控制台日志显示无尽的0.1条目。
但是，如果我反过来，所以初始不透明度为1，div中有文本开始，并且我设置fadeIn实际上是通过使用fadeDiv.style.opacity == 0作为clearInterfal(id)的if语句检查，并通过-= 0.1递减fadeDiv.style.opacity，它就能正常工作。
我完全不知道为什么递减是正确的，而递增不是。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
CSS属性始终是字符串，而不是数字。你的代码执行了
'0.1' + 0.1，结果是'0.10.1'，这不是一个有效的数字，所以可能被截断回到0.1。改变它的一种方法是将结果解析为数字。
if (parseFloat(fadeDiv.style.opacity) == 1) { clearInterval(id); } else { fadeDiv.style.opacity = parseFloat(fadeDiv.style.opacity) + 0.1; console.log(fadeDiv.style.opacity); }HTMLELement::style包含字符串值，需要转换为浮点数：function fadeIn(divNum) { let id = null; fadeDiv = document.getElementById("jsTest"); fadeDiv.innerHTML = ""; console.log(fadeDiv.style.opacity); if (divNum == 1) { fadeDiv.innerHTML = "一些文本"; } else if (divNum == 2 ) { fadeDiv.innerHTML = "一些不同的文本"; } else if (divNum == 3) { fadeDiv.innerHTML = "仍然不同的文本"; } else { fadeDiv.innerHTML = "哎呀！这不应该发生的"; } clearInterval(id); id = setInterval(moveIt,100); function moveIt() { if (fadeDiv.style.opacity == 1) { clearInterval(id); } else { fadeDiv.style.opacity = +fadeDiv.style.opacity + .1; console.log(fadeDiv.style.opacity); } } }