Fading in HTML text in JavaScript

Question

I've been trying to get some text to fade in from opacity 0 to 100, but I can't seem to get it to work right. Credits to the person for the original fadeOut version.

Here's the code...

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

I kinda want to avoid using a external library, but I'm aware that it'll make this so much easier. I would like a solution in vanilla JavaScript. — PrimRock
– PrimRock, Commented Jun 19, 2015 at 5:03
Yes. It would be $('#" + id).fadeOut(2000) where 2000 is 2 seconds :) Just in case you will use it. — Yeldar Kurmangaliyev
– Yeldar Kurmangaliyev, Commented Jun 19, 2015 at 5:05
I'll be sure to use this when I play around with JQuery more in the future. Thanks :) — PrimRock
– PrimRock, Commented Jun 19, 2015 at 5:10

Arun P Johny · Accepted Answer · 2015-06-19 05:08:10Z

3

I think there are 2 problems, 1 the opacity values vary from 0...1 not 0..100 also when opacity is 1 you need to stop the loop.

Second, s.opacity returns a string, so since you are using + operator you need to convert the value to a string else a string concatenation will be performed

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>

answered Jun 19, 2015 at 5:08

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

nixkuroi · Accepted Answer · 2015-06-22 20:06:25Z

1

All you have to do is set an interval and then count up to 100 by your speed/100 in increments.

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>

edited Jun 22, 2015 at 20:06

answered Jun 19, 2015 at 5:20

nixkuroi

2,3291 gold badge20 silver badges25 bronze badges

Collectives™ on Stack Overflow

Fading in HTML text in JavaScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related