javascript 淡入淡出不起作用

Question

有谁知道为什么我的 javascript 不能正常工作？下面是代码:

function load(){
    function fadein(){
        var op = document.getElementsByClassName("load_1")[0]
        op.style.opacity = 0;
        function animate(){
            if ((op.style.opacity = op.style.opacity + 0.01) < 1){
                alert("Hello")
                requestAnimationFrame(animate);
            }
        }
        animate()
    }
    fadein()
}

load()

Answer 1

我知道你说过你希望它完全按照原来的方式工作，所以如果我的建议有点过分，我深表歉意，但由于以下原因，我无法让它按照你的方式工作:

1. 在我看来，嵌套函数至少在 JavaScript 中不是一个好的做法，因为它很多时候会导致函数无法工作，就像你的情况一样。话虽如此，您可以单独定义它们并在加载函数中调用它们。
2. 如果在外部声明 var 操作的定义，那么它是一个共享变量，效果会更好。否则我建议将其作为函数之间的参数传递。实际上取决于您稍后的目标，但目前我注意到它有时会阻止其他功能看到它
3. 最后，但可能也是最重要的一点是，op.style.opacity 不是一个数字。你可以直接向它传递一个数字，但向其中添加数字是行不通的，因为它会被解析为字符串并成为 CSS。

在下面找到建议代码。它有多项更改，但希望不会像您希望的那样太多。

 var op = document.getElementsByClassName("load_1")[0];
 load();
 function load(){
     fadein();
     animate();
 }
 function animate(){
      var opac = parseFloat(op.style.opacity);
      opac = opac+0.1;
      op.style.opacity = opac;
      if ((op.style.opacity) < 1){
           alert("Hello");
           requestAnimationFrame(animate);
      }
}
function fadein(){
     op.style.opacity = 0.1;
}