Javascript Mostrando div em cadeia javascript

Medivh · 8 de setembro de 2019

To aprendendo javascript e, queria saber como chamar varias <div>, com um intervalo de tempo entre eles, ou seja, aparecer um após o outro na tela. Queria também se da pra adicionar mais algum estilo no javascript pois, tentei adicionar uma "transition" porém, nada acontecia.

<!DOCTYPE html>
<html>
<head>
</head>
	<style type="text/css">

	#square  {
  position: absolute;
  width: 300px;
  height: 150px;
  background-color: lightblue;
  border: 1px solid black;
  opacity: 0.1;
}
#outro{
	margin-top:300px;
	width:300px;
	height:150px;
	background-color:black;
	}

		
	</style>
	<script type="text/javascript">
		
		function square(){
			document.getElementById('square').style.opacity = "1";
			

			}

	</script>
<body>
	<button onclick="square()">Vamos Tentar!</button>
	<div>
		<div id="square"></div>
	</div>
	<div>
		<div id="outro"></div>
	</div>

</body>
</html>

DiF · 8 de setembro de 2019

2 horas atrás, Medivh disse:

queria saber como chamar varias <div>, com um intervalo de tempo entre eles, ou seja, aparecer um após o outro na tela.

Podes usar o setInterval() e criar algumas funções.

exemplo:

HTML:

<button id="pause">Pausar</button>
<button id="start">Start</button>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>

//Função para mostrar o elemento
function display(id){
   document.getElementById(id).style.display = 'block';
} 

//Função que esconde todos os elementos pela tagname
function hideAll(){
   var divs = document.getElementsByTagName("div");
   for (var i = 0; i < divs.length; i++) {
       divs[i].style.display = 'none';        
   }
}

//Timer. Recebe o ID do elemento e o tempo de delay
function timer(id, delay){
   setTimeout(function(){
       display(id); 
   }, delay);
}

var time = setInterval(function(){ 
     //chama o primeiro elemento DIV com 1 segundo
     timer("one",1000);
     //chama o segundo elemento DIV com 1 segundo e meio
     timer("two", 1500);
     //chama o terceiro elemento DIV com 2 segundos.
     timer("three",2000);
     //esconde todos os elementos
     hideAll();
  }, 2500);
  
  //Função de Click do button
  document.getElementById("pause").addEventListener("click", function(e) {
  e.preventDefault();
  //para o setInterval()
  clearInterval(time);
  alert("Parou o loop");
});

document.getElementById("start").addEventListener("click", function(e){
	e.preventDefault();
  //recarrega a página sem o cache do navegador
  location.reload(true);
  alert("Aperte OK para iniciar loop");
});

Veja funcionando no link abaixo:

https://jsfiddle.net/dife/twvo0h69/66/

Para adicionar um efeito.. tipo fade in pelo CSS

Seria algo do tipo:

<div id="one" class="fadein"></div>
<div id="two" class="fadein"></div>
<div id="three" class="fadein"></div>

div{
  width: 300px;
  height: 150px;
  margin-top: 1em;
  margin-bottom: 1em;
  display: none;
  -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2ms; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

#one{ background: red;}
#two{ background: blue;}
#three{ background: green;}

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

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

Se optar por fazer em jQuery do que javascript puro, é possível usar as funções de efeito que ele possui. reduzirá bastante as linhas de código. Além disso ele é mais fácil que o JS puro

Medivh · 12 de setembro de 2019

Muito obrigado, a segunda parte ae é preciso fazer para cada navegador?

div{
  width: 300px;
  height: 150px;
  margin-top: 1em;
  margin-bottom: 1em;
  display: none;
  -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2ms; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

#one{ background: red;}
#two{ background: blue;}
#three{ background: green;}

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

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}