How do I make a div fade in over a set time?

Question

I want to make my div box fade in but it never appears.

The first time I tried to use a loop but that made an infinite loop and crashed because I put a timeout in it.

Now I'm trying to use a function that adds 0.1 opacity to the object every set amount of time until it is at max 1 but nothing happens-

function fadethis1 (fadeObjectIn) {debugger
   if (fadeObjectIn.style.opacity>1){
  setTimeout(() => {
    fadeObjectIn.style.opacity=fadeObjectIn.style.opacity+0.1
    fadeObjectIn.style.opacity=parseFloat(fadeObjectIn.style.opacity)+0.1
  }, 100);
    
  fadethis1(document.querySelector("div.alertbox")) }
}

You sure you only want to execute the timeout if the opacity is _greater-than_ 1? — Phil, Jan 03 '23 at 02:57
Thanks, I didn't even realize that haha, that's what happens when you code late night — user20915633, Jan 03 '23 at 11:18

score -1 · Answer 1 · answered Jan 03 '23 at 03:09

const fadeInDiv = () => {
    const fade = document.getElementById("fade");
    let fadeIndex = 0;
    
    const fadeInterval = setInterval(() => {
      fadeIndex += 0.1;
      fade.style.opacity = fadeIndex;
      if (fadeIndex >= .9) clearInterval(fadeInterval);
    }, 100);
}

fadeInDiv();

#fade {
    width: 250px;
    height: 100px;
    background-color: green;
    opacity: 0;
}

<div id="fade"></div>

How do I make a div fade in over a set time?

1 Answers1