用JavaScript淡化HTML文字

Question

我一直在嘗試使一些文本從不透明度0淡入100，但是我似乎無法使其正常工作。 將原始的faderOut版本記入此人。

這是代碼...

fadeIn = function(id, speed) {
    var s = document.getElementById(id).style;
    s.opacity = 0;
    (function fade() {(s.opacity+= .1)<100?s.display="inline":setTimeout(fade,speed)})();
}

Answer 1

我認為有2個問題，1的不透明度值從0...1 0..100不等，當不透明度為1時，您需要停止循環。

其次， s.opacity返回一個字符串，因此，由於您使用的是+運算符，因此需要將值轉換為字符串，否則將執行字符串連接

 fadeIn = function(id, speed) { var s = document.getElementById(id).style; s.opacity = 0; (function fade() { (s.opacity = +s.opacity + .1) >= 1 ? s.display = "inline" : setTimeout(fade, speed) })(); } fadeIn('s', 500) 

 <div id="s">asdfsadf</div> 

Answer 2

您所要做的就是設置一個間隔，然后以您的速度/ 100遞增的數量遞增至100。

 function fadeIn(id, speed) { var max = 100, count = 0; var increment = speed / max; var obj = document.getElementById(id); var interval = setInterval(function() { obj.style.opacity = (count / max); if (count == max) { clearInterval(interval); } count++; }, increment); } 

 #faded { opacity: 0; } 

 <div id="faded">Fade me in</div> <button onclick="fadeIn('faded', 3000)">Fade it in</button>