0

Boa tarde, quero fazer uma sequência de DIVs exibidos um a um durante um intervalo de tempo, no mesmo local, incluindo fade in e fade out. Pergunto: como usar JS para determinar esse intervalo e seguir a execução?

Exemplo:

Aqui vai aparecer o conteúdo:

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

Este é o conteúdo:

<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>

Funcionamento desejado:

  1. Exibe "tela1" em "local"
  2. Aguarda 10 segundos
  3. Fade out e fade in
  4. Exibe "tela2" em "local"
  5. Aguarda 10 segundos
  6. Fade out e fade in
  7. Repete o processo até exibir o conteúdo de todos os DIVs

Obrigado!

1 Resposta 1

1

Você pode utilizar uma função assíncrona para realizar esse efeito. Para isso basta criar uma função com a palavra chave async na frente. Ex:

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

Isso vai permitir que você use o operador await para poder pausar a função durante um tempo. Ex:

await espera_x_segundos();

Agora você pode criar uma função espera_x_segundos com um setTimeout. O await vai esperar esse tempo acabar para depois prosseguir com o código.

Para animação você utilizar os @keyframes do CSS. Ex:

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

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

Com isso você pode fazer um efeito de fadein ou fadeout de forma fácil.

Segue exemplo completo:

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>


Alternativa com 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>

1
  • Muito obrigado, Valdeir. Commented 30/01/2018 às 20:52

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .