Estou com um desafio do qual preciso que as DIVs apareçam em sequencia, uma apos a outra.
Para isso, criei um loop com que executa as funções de FadeIn()
e FadeOut()
para cada elemento DIV do meu HTML.
Porém, pelo que percebi, o loop esta executando tudo de uma unica vez, sem ter um intervalo entre a aparição de uma div e outra. Tentei utilizar funções como setInteval()
e sleep()
, porém não obtive sucesso.
Segue codigo
$(document).ready(function() {
var tempo = 2000;
var quant = $("#conteudos").children().length;
var res = tempo * quant;
carregar();
function carregar(){
var i = [1,2,3,4,5];
var quanti = i.length;
for(j=0;j<quanti;j++){
var divagora = i[j];
$("#div"+divagora).fadeIn();
$("#div"+divagora).fadeOut(3000);
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<div id="conteudos">
<div id="div1" style="position:absolute; display: none; width: 100px; height: 100px; background-color: red"></div>
<div id="div2" style="position:absolute; display: none; width: 100px; height: 100px; background-color: blue"></div>
<div id="div3" style="position:absolute; display: none; width: 100px; height: 100px; background-color: black"></div>
<div id="div4" style="position:absolute; display: none; width: 100px; height: 100px; background-color: yellow"></div>
<div id="div5" style="position:absolute; display: none; width: 100px; height: 100px; background-color: purple"></div>
</div>
</body>
</html>
Alguém teria alguma proposta para esse caso ?
Obrigado!