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>