Question

我一直试图让一些文字从不透明度0变为100，但我似乎无法让它正常工作。对于原始fadeOut版本的人的信用。

这是代码......

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返回一个字符串，因此您使用+运算符需要将值转换为字符串，否则将执行字符串连接

＆＃13;

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)

＆＃13;

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

＆＃13;

Answer 2

您所要做的就是设置一个间隔，然后以速度/ 100为增量计数到100。

＆＃13;

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);
}

＆＃13;

#faded {
  opacity: 0;
}

＆＃13;

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

＆＃13;

在JavaScript中淡入HTML文本

2 个答案: