不透明度效果从 1.0 到 0，但不是从 0 到 1.0答案

【问题标题】：Opacity effect works from 1.0 to 0, but not 0 to 1.0不透明度效果从 1.0 到 0，但不是从 0 到 1.0
【发布时间】：2012-10-02 22:40:00
【问题描述】：

我想通过单击按钮将 div 的不透明度从 0 增加到 1.0。我可以将不透明度从 1.0 降低到 0.0，但它不能从 0.0 降低到 1.0。我也尝试使用parseInt(element.style.opacity) 和parseFloat(element.style.opacity)，但这些都不起作用。这是错误的 JavaScript：

function myF(){
var x = document.getElementById("test").style; 
x.opacity = parseFloat(x.opacity) + 0.1;
setTimeout(myF(),10);
}

这是错误的 HTML：

<button onclick="myF()">Click to change opacity</button>
<div style="height:200px; width:200px; background-color:#656b67; opacity:0;" id="test">     </div>

（以下是用于降低不透明度的javascript和HTML）

<body>
<script>
function myF(){
    var x = document.getElementById("test").style;
    x.opacity = x.opacity - 0.1;
    setTimeout(function(){myF();},10);
}
</script>
<button onclick="myF()">Click to resize</button>
<div style="height:200px; width:200px; background-color:#656b67; opacity:1.0;"     id="test"></div>
</body>

【问题讨论】：

你在使用 jQuery 吗？你检查visibility 和display css 属性了吗？
不，我正在使用 JavaScript。我将在帖子中编辑我的代码。
向我们展示降低不透明度并成功运行的代码
为什么对这个问题投反对票？

标签： opacity parseint parsefloat

【解决方案1】：

改变

setTimeout(myF(),10);

到

setTimeout(myF, 10);

您不想立即调用该函数，而是要将其传递给setTimeout。

此外，您还有一个永无止境的循环。该函数被递归调用，并且没有结束条件。立即调用它时，这将导致您的浏览器冻结。

【讨论】：

这也不起作用...尽管感谢您提醒我缺少上限。但它仍然无法使用它......
Worksforme 很好。您可能只想让超时时间更长一点，以便您可以注意到动画
谢谢！它现在也适用于我！一定是语法错误。
我实际上发现了错误所在。显然，我的文本编辑器在实际编辑界面中没有显示的代码中添加了一个随机字符。所以浏览器不知道该怎么做。谢谢！

【解决方案2】：

function myF(){
  var transparent_div = document.getElementById("test");

  var opacity = parseFloat(transparent_div.style.opacity);

  if (isNaN(opacity)) opacity = 0.1;
  else opacity += 0.1;

  transparent_div.style.opacity = opacity;

  if (opacity < 1.0) setTimeout(function(){myF();},100);
}

如果不透明度设置为 "" 一个空字符串，您将不会解析数字，因此 Javascript 会将其作为 NaN 对象返回，您可以使用 isNaN() 对其进行测试。我认为这是您的主要问题之一； parseFloat() 是正确的使用方法，您只需要相应地检查您的返回值。

【讨论】：

好点，虽然你可以通过var o = parseFloat(style.opacity) || 0;做更简单的事情