Question

function fade()
{

    var i = 0;
    var h1 = document.getElementsByTagName("h1")[0];
    h1.style.opacity = 0;
    var k = window.setInterval(function()
    {
        if(i >= 10)
            clearInterval(k);
        else
        {
            h1.style.opacity += i/10;
            i++;
        }
    }     

            , 10);


};

这是我的功能，它应该逐渐增加h1标签的不透明度，制作淡入动画效果，但在第一个循环后停止（当不透明度为0.1时）。

如果这有点帮助的话，该函数在我的body标签中调用onload。

Answer 1

您不希望将计算结果添加到不透明度中，您想要设置它：

h1.style.opacity = i / 10;

您可能还想稍微减慢间隔。 YMMV虽然。

这是完整的代码：

function fade() {
  var i = 0;
  var h1 = document.getElementsByTagName("h1")[0];
  h1.style.opacity = 0;
  var k = window.setInterval(function() {
    if (i >= 10) {
      clearInterval(k);
    } else {
      h1.style.opacity = i / 10;
      i++;
    }
  }, 100);
};
fade()

<h1>
  My heading
</h1>

Javascript DOM逐渐改变不透明度

1 个答案: