爲什麼我的節點的樣式只會減少而不會增加？

我在一個網站上工作，我試圖以編程方式淡入淡出一個對象。
但是，當我運行我的循環時，它只會從對象中減去不透明度，當我嘗試添加到不透明度時，它只在整個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

我已經嘗試過，但亞工程將嘗試它是串聯嘗試爲了節省時間和懶惰，讓我大聲笑 –

爲什麼我的節點的樣式只會減少而不會增加？

回答

相關問題