Q: Fade in and Fade out using JavaScript and HTML I want to use fade in and fade out animation using JavaScript functions. My code is not working for some reason. Here are the div and JavaScript Functions.
The final output should be like the first image should fade out and the second image should fade in.
.special1 
       { opacity:0.0; position:absolute; height: 175px; margin-right:25px}

      .visible1 {
          opacity: 1.0;
          position: absolute;
          height: 175px;
          margin-right: 25px;

      }

<body onLoad="fading()">

<div id="div21" class="visible1"> <img src="home/img" alt="img1"/> </div>
<div id="div22" class="special1">  <img src="home/img2" alt="img2"/> </div> 

function fading()
{

disappear();
}

function disappear() {
document.getElementById("div21").style.opacity = fadeOut_opacity;
document.getElementById("div22").style.opacity = fadeIn_opacity;

fadeOut_opacity -= delta;
fadeIn_opacity += delta;

if (fadeIn_opacity >= 1)
    return;

timer = setTimeout("disappear()", 1);
}


A: You can do it with plain Javascript.
But why do that if you have CSS transition or
more contingently, JQuery FadeIn and FadeOut methods built in with many other functionalities like fading speed? 

A: I have editted your code and i works how you want.


var delta = .002;
var fadeOut_opacity = 1;
var fadeIn_opacity = 0;

function fading() {

  disappear();
}

function disappear() {
  document.getElementById("div21").style.opacity = fadeOut_opacity;
  document.getElementById("div22").style.opacity = fadeIn_opacity;

  fadeOut_opacity -= delta;
  fadeIn_opacity += delta;

  if (fadeIn_opacity >= 1)
    return;

  timer = setTimeout("disappear()", 1);
}
.special1 {
  opacity: 0.0;
  position: absolute;
  height: 175px;
  margin-right: 25px
}

.visible1 {
  opacity: 1.0;
  position: absolute;
  height: 175px;
  margin-right: 25px;
}
<body onLoad="fading()">

  <div id="div21" class="visible1"> <img src="https://via.placeholder.com/150?text=image%201" alt="img1" /> </div>
  <div id="div22" class="special1"> <img src="https://via.placeholder.com/150?text=image%202" alt="img2" /> </div>

</body>


But like the others say it's more complicated to use vanilla js for opacity transitions. You can use css transition to achieve this.


function fading() {

  var div21 = document.getElementById('div21');
  var div22 = document.getElementById('div22');

  div21.classList.toggle('special1');
  div21.classList.toggle('visible1');
  div22.classList.toggle('special1');
  div22.classList.toggle('visible1');
}
.visible1,
.special1 {
  position: absolute;
  height: 175px;
  margin-right: 25px;
  transition: opacity ease 3.2s;
}

.visible1 {
  opacity: 1.0;
}

.special1 {
  opacity: 0.0;
}
<body onLoad="fading()">

  <div id="div21" class="visible1"> <img src="https://via.placeholder.com/150?text=image%201" alt="img1" /> </div>
  <div id="div22" class="special1"> <img src="https://via.placeholder.com/150?text=image%202" alt="img2" /> </div>

</body>


EDIT: For your comment @Afroboy23  "How would the code change if I have more than two images? For e.g 10 images"


let fId;

function fading() {
  fId = setInterval(toggleImg, 2000);
}

function toggleImg() {
  let visible = document.querySelector('.visible1');

  if (!visible.nextElementSibling.classList.contains('special1')) {
    clearInterval(fId);
    return;
  }

  visible.classList.toggle('visible1');
  visible.nextElementSibling.classList.toggle('visible1');
}
.visible1,
.special1 {
  position: absolute;
  height: 175px;
  margin-right: 25px;
  transition: opacity ease 3.2s;
  opacity: 0.0;
}

.visible1 {
  opacity: 1.0;
}
<body onLoad="fading()">

  <div id="div21" class="special1 visible1"> <img src="https://via.placeholder.com/150?text=image%201" alt="img1" /> </div>
  <div id="div22" class="special1"> <img src="https://via.placeholder.com/150?text=image%202" alt="img2" /> </div>
  <div id="div23" class="special1"> <img src="https://via.placeholder.com/150?text=image%203" alt="img3" /> </div>
  <div id="div24" class="special1"> <img src="https://via.placeholder.com/150?text=image%204" alt="img4" /> </div>
  <div id="div25" class="special1"> <img src="https://via.placeholder.com/150?text=image%205" alt="img5" /> </div>
  <div id="div26" class="special1"> <img src="https://via.placeholder.com/150?text=image%206" alt="img6" /> </div>
  <div id="div27" class="special1"> <img src="https://via.placeholder.com/150?text=image%207" alt="img7" /> </div>
  <div id="div28" class="special1"> <img src="https://via.placeholder.com/150?text=image%208" alt="img8" /> </div>
  <div id="div29" class="special1"> <img src="https://via.placeholder.com/150?text=image%209" alt="img9" /> </div>
  <div id="div30" class="special1"> <img src="https://via.placeholder.com/150?text=image%2010" alt="img10" /> </div>

</body>


