How to display sequential Divs using fade and controlling time?

Question

Good afternoon, I want to do a sequence of Divs shown one by one during a time interval in the same location, including fade in and fade out. Question: how to use JS to determine this interval and follow the execution?

Example:

Here will appear the contents:

<div id="local"></div>

This is the content:

<div id="tela1" style="opacity:1; transition: 10s">Tela 1</div>
<div id="tela2" style="opacity:0">Tela 2</div>
<div id="tela3" style="opacity:0">Tela 3</div>

Desired operation:

1. Displays "tela1" in "local"
2. Wait 10 seconds
3. Fade out and fade in
4. Displays "tela2" in "local"
5. Wait 10 seconds
6. Fade out and fade in
7. Repeats the process until displaying the contents of all Divs

Thank you!

Answer 1

You can use a asynchronous function to accomplish this. Just create a keyword function async in front. Ex:

(async () => {
  /* Code here */
})();

This will allow you to use the operator await to pause the function for a while. Ex:

await espera_x_segundos();

Now you can create a function espera_x_segundos with a setTimeout. The await will wait that time to run out and then proceed with the code.

For animation you use the @keyframes of the CSS. Ex:

#local {
  animation-duration: 2s;
  animation-name: fadeout;
}

@keyframes fadein {
    from {opacity: 0}
    to {opacity: 1}
}

With this you can make an effect of fadein or fadeout easily.

The following complete example:

let telas = document.querySelectorAll(".tela");
const local = document.querySelector("#local");

(async () => {
  for (let tela of telas) {
    local.innerHTML = tela.outerHTML;
    local.classList.add("active")
    await wait(2000)
    local.classList.remove("active")
    await wait(2000)
  }
})();

function wait(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

#local {
  animation-duration: 2s;
  animation-name: fadeout;
}

#local.active {
  animation-duration: 2s;
  animation-name: fadein;
}

@keyframes fadein {
  from {opacity: 0}
  to {opacity: 1}
}

@keyframes fadeout {
  from {opacity: 1}
  to {opacity: 0}
}

<div id="tela1" class="tela">Tela 1</div>
<div id="tela2" class="tela">Tela 2</div>
<div id="tela3" class="tela">Tela 3</div>

<hr />

<div id="local">Olá Brazil</div>

---

Alternative with jQuery

let telas = document.querySelectorAll(".tela");

(async () => {
  for (let tela of telas) {
    $("#local").empty().html( tela.outerHTML )
      .fadeIn(1000)    // Duração do efeito FadeIn
      .delay(3000)     // Delay antes da próxima execução
      .fadeOut(1000);  // Duração do efeito FadeOut
      
    await wait(5000);  // Soma dos valores acima
  }
})();

function wait(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

#local {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="tela1" class="tela">Tela 1</div>
<div id="tela2" class="tela">Tela 2</div>
<div id="tela3" class="tela">Tela 3</div>

<hr />

<div id="local"></div>