You can use a asynchronous function to achieve this effect. To do this, simply create a function with the keyword async on the front. Ex:
(async () => {
/* Code here */
})();
This will allow you to use the await operator. > to be able to pause the function for a while. Ex:
await espera_x_segundos();
Now you can create a espera_x_segundos function with a setTimeout . The await will wait for this time to end and then continue with the code.
For animation you can use @keyframes of 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.
Here is a 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><divid="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>
