设置不透明度动画时，JS setInterval（）仅运行一次

Question

我搜索过，发现大多数有此问题的人都在传递函数调用而不是函数名称，即：setInterval（myFunc（），100）而不是setInterval（myFunc，100）

但是我不是，它仍然无法工作...我也看到很多人说您需要对不透明度进行parseFloat才能使其正常工作，我已经尝试过了，但它仍然产生相同的结果。 ..

无论我是否包含if（i.style.opacity == 1）子句，功能runSubMenu1（）似乎只运行一次

不知道从这里去哪里？ 建议？

<script type="text/javascript">

var run;
var runOpt;

function openSubMenu1(item) {
    runOpt=item;
    run = setInterval(runSubMenu1,100);

}

function runSubMenu1()  {
    var i=document.getElementById('menu-1-'+runOpt);

    if(i.style.opacity==1){clearInterval(run);}
    else{i.style.opacity+=.1;}


}


</script>

编辑：进行了jfriend00提及的更改，并且不透明度在与页面一起发送的原始CSS中设置为0，经过1次迭代后，不透明度似乎为.1

Answer 1

您需要解析该值，因为它是一个字符串，否则+= .1失败：

    else { i.style.opacity = parseFloat(i.style.opacity) + .1; }

您将.1添加到".1" ，结果是： ".1.1" 。 将此值分配给opacity会调用数字解析器，因为它是一个数字值，但由于它不是有效数字，因此失败了，因此回落到.1 。 该间隔无限循环，但是由于它仅从0移到.1，因此看起来只运行了一次。

这是一个显示结果的jsFiddle 。