Javascript DOM 逐渐改变不透明度

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>