为什么我的节点的样式只会减少而不会增加？

我在一个网站上工作，我试图以编程方式淡入淡出一个对象。
但是，当我运行我的循环时，它只会从对象中减去不透明度，当我尝试添加到不透明度时，它只在整个100个循环中保持为0.01，但是当它运行100-199时，它每次减去0.01。
我很困惑为什么它做这样......为什么我的节点的样式只会减少而不会增加？

function searched() { 
    var count = 0; 
    if (srched) { 
     return 
    } else { 

     let runloop = setInterval(function() { 
      if (count <= 99) { 
       document.getElementById("done").style.opacity += 0.01; 
      } else if (count > 99 && count <= 199) { 
       document.getElementById("done").style.opacity -= 0.01; 
      } else { 
       clearInterval(this) 
       srched = false; 
      } 
      count += 1; 
     }, 40) 

    } 

}

的HTML代码是：

<p id = "done" style="opacity: 0; color: #1a5b02;">

有与循环没有问题，只是增加了透明度。

来源

2017-04-24 Chris Hutchison

–

回答的问题是以下，但真正的解决方案是使用一个CSS动画。这样你就不必诉诸JS了。 –

呃我喜欢亲自使用javascript我试图改进它，因为我刚开始使用它 –

的问题是，+=也意味着串联，所以不透明度属性的值获得的'0' + '0.01' = '00.01'值的循环，这被修正为0.01的第一次，但你在接下来的迭代中，得到'0.010.01'这是一个错误。

-=没有问题 - 它不能是一个字符串操作，所以它只是做减法。

解决方案：确保不要错误地进行连接。我觉得最短的解决办法是写...opacity -= -0.01;但我如果有任何短的好奇;）

来源

2017-04-24 06:29:43

哇，甚至没有想到，大声笑立即飞过了我的头如何css把它作为一个字符串。感谢那！ :) –

我无法从源头看到发生了什么问题，所以我不得不查看错误控制台。这些错误信息是有原因的！ –

雅它没有告诉我任何东西在错误控制台是怪异的一部分，所以我一直尝试不同的解决方案，但不能完全得到它 –

您需要使用加/减你不透明度，否则将被处理为字符串，因此你的效果是不工作

var srched=false; 
 
function searched() { 
 
    var count = 0,done=document.getElementById("done"); 
 
    if (srched) { 
 
     return 
 
    } else { 
 

 
     let runloop = setInterval(function() { 
 
      if (count <= 99) { 
 
       done.style.opacity = Number(done.style.opacity)+0.01; 
 
      } else if (count > 99 && count <= 199) { 
 
       done.style.opacity = Number(done.style.opacity)-0.01; 
 
      } else { 
 
       clearInterval(this) 
 
       srched = false; 
 
      } 
 
      count += 1; 
 
     }, 40) 
 

 
    } 
 

 
} 
 
searched();

<p id="done">Lorem ipsum doner inut</p>

来源

2017-04-24 06:33:36

我已经尝试过，但亚工程将尝试它是串联尝试为了节省时间和懒惰，让我大声笑 –

为什么我的节点的样式只会减少而不会增加？

回答

相关问题