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

我知道你说你希望它能按照这样的方式工作，所以如果我的建议有点落伍，我会道歉，但由于以下原因，我无法按照你的方式工作：< / p>

在我看来，嵌套函数至少在JavaScript中不是一个好习惯，因为它会多次导致它不起作用，就像在你的情况下似乎做的那样。可以说，你可以单独定义它们并在你的加载功能中调用它们。
如果在外部声明var op的定义，它将更好地工作，因此它是一个共享变量。否则我会建议将它作为函数之间的参数传递。真的取决于你以后的目标，但目前我注意到它会阻止其他功能有时看到它
最后，但可能最重要的是，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;
}

javascript淡出淡出不起作用

1 个答案: