Question

我想通过点击一个按钮将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>

Answer 1

更改

setTimeout(myF(),10);

到

setTimeout(myF, 10);

您不想立即致电该功能，而是希望将其传递给setTimeout。

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

Answer 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（）是正确使用的东西，你只需要相应地检查你的返回值。

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

2 个答案: