JS setInterval()仅在动画不透明度时运行一次

时间:2013-10-15 00:56:29

标签: javascript opacity setinterval

我搜索并看到大多数有这个问题的人都在传递函数调用而不是函数名称,即:setInterval(myFunc(),100)而不是setInterval(myFunc,100)

但是我不是,它仍然无法工作......我也看到很多人说你需要解析不透明度才能让它发挥作用,我已经尝试了它仍然会产生同样的结果......

函数runSubMenu1()似乎只运行一次,无论我是否包含if(i.style.opacity == 1)子句

不确定从哪里开始?建议?

<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提到的更改,并且opacity在与页面一起发送的原始CSS中设置了值0,在1次迭代后,不透明度似乎是.1

1 个答案:

答案 0 :(得分:0)

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

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

您要将.1添加到".1",结果为:".1.1"。将此值分配给不透明度将调用数字解析器,因为它是一个数值,但由于它不是有效数字,因此失败,因此它会回退到.1。区间无限循环,但由于它只从0移动到.1,它看起来只运行一次。

这是显示结果的jsFiddle

相关问题