Fade in Div in JavaScript

by shraddhapaghdar

HTML

<div id="fadeEl" class="fadeElClass"
onclick="fadeIn()">
            Hello World!
        </div>

CSS

.fadeElClass {
  width: 200px;
  height: 20px;
  text-align: center;
  background: red;
}

JavaScript

function fadeIn() {
const element = document.getElementById('fadeEl');
console.log(element.style);
  // Initilize the opacity with 0.1
  let initOpacity = 0.1;
  element.style.display = 'block';
  // Update the opacity with 0.1 every 10 milliseconds
  const timer = setInterval(function () {
    if (initOpacity >= 1) {
      clearInterval(timer);
    }
    element.style.opacity = initOpacity;
    element.style.filter = 'alpha(opacity=' + initOpacity * 100 + ")";
    initOpacity += initOpacity * 0.1;
  }, 500);
}

fadeIn()