Fadein in pure javascript not working. Why?

Question

I found this code here: https://stackoverflow.com/a/29017677 . This is fadeOut function. It's working

var s = document.getElementById('thing').style;
s.opacity = 1;
(function fade(){(s.opacity-=.1)<0?s.display="none":setTimeout(fade,100)})();

var s = document.getElementById('thing').style;
s.opacity = 1;
(function fade(){(s.opacity-=.1)<0?s.display="none":setTimeout(fade,100)})();

#thing {
  background: red;
  line-height: 40px;
}

<div id="thing">I will fade...</div>

now I am trying to write a function for fadeIn like the fadeOut function. But this function doesn't work. I do not understand why.

var s = document.getElementById('thing').style;
s.opacity = 0;
(function fade(){(s.opacity+=.1)>0.95?s.display="block":setTimeout(fade,100)})();

var s = document.getElementById('thing').style;
s.opacity = 0;
(function fade(){(s.opacity+=.1)>0.95?s.display="block":setTimeout(fade,100)})();

#thing {
  background: red;
  line-height: 40px;
}

<div id="thing">I will fade...</div>

Looking at your code I have no idea why it's failing but from logging it it seems like `s.opacity+=.1` has no effect. Logging `s` before and after gives 0, then 0.1, then keeps giving 0.1. Again, no idea what's happening there. — , Jun 11 '21 at 12:01

score 1 · Answer 1 · answered Jun 11 '21 at 11:52

1

The best solution for your case would be to use more CSS instead of JS, you can add the property transition to the #thing selector and then all you need to do is set the opacity via JS code(no need to add timeouts or any other form of complicated handling)

function hide() {
  document.getElementById('thing').style.opacity = 0
}

function show() {
  document.getElementById('thing').style.opacity = 1
}

#thing {
  transition: .4s
}

<div id="thing">I am showing up</div>
<button onclick="hide()">hide</button>
<button onclick="show()">show</button>

answered Jun 11 '21 at 11:52

Breno Prata

712
5
10

More on transition attribute here: https://www.w3schools.com/css/css3_transitions.asp – Breno Prata Jun 11 '21 at 11:54
[Here](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions) is more information on CSS Transitions. Note that there's quite some flexibility with transitions if one makes use of `transition-delay`, `transition-property`, `transition-duration` and `transition-timing-function`. – Alain Doe Jun 11 '21 at 11:58
@BrenoPrata [Please do not use, recommend or link to w3schools.](https://meta.stackoverflow.com/questions/280478/why-not-w3schools-com) (also, while this provides a valid alternate solution, it doesn't really answer OP's question. They specifically ask why their code fails, and your answer doesn't address that) – Jun 11 '21 at 12:02
Great solution! I'll test it. – Kulikov Jun 13 '21 at 18:46

Iago Calazans · Accepted Answer · 2021-06-11T13:21:41.427

0

The += is trying to append, so keep with -= and set your .1 to negative value as -0.1 and it will works.

var s = document.getElementById('thing').style;
s.opacity = 0;
(function fade() {
    (s.opacity -= -0.1) < 1 && setTimeout(fade,100);
    }
)();

#thing{
  background: red;
  line-height: 40px;
  opacity: 0;
}

<div id="thing">I will fade...</div>

Complementing my answer with Chris G's comment:

The opacity is a string, so appending 0.1 works the first time: "0" + "0.1" is "00.1" which checks out. Then it's "0.1" + 0.1 which is "0.10.1" and gets parsed back into "0.1" - Chris G

edited Jun 11 '21 at 13:21

answered Jun 11 '21 at 12:53

Iago Calazans

329
1
10

1

Nice catch! The opacity is a string, so appending 0.1 works the first time: `"0" + "0.1"` is `"00.1"` which checks out. Then it's `"0.1" + 0.1` which is `"0.10.1"` and gets parsed back into `"0.1"` – Jun 11 '21 at 13:16
1

Thanks for the explanation! Best regards! – Kulikov Jun 13 '21 at 18:44

Fadein in pure javascript not working. Why?

2 Answers2