Loop em função JavaScript

[marlonboecker 3]

Pessoal, tudo certo? espero que sim.

 

Então é o seguinte, fiz um script para umas animações no meu site e gostaria que no fim ele voltasse do inicio, como um banner, mas não estou conseguindo, já tentei setInterval, setTimeout, While.

 

Segue meu código para darem uma olhada.

 

Desde já obrigado a todos!

 

setTimeout(function () {
		$(".titulo-banner").addClass("animated fadeInDown");
	}, 400);
	setTimeout(function () {
		$(".hamburguer").addClass("animated fadeInDown");
	}, 800);
	setTimeout(function () {
		$(".motivos .preco").addClass("animated fadeInDown");
	}, 2000);
	setTimeout(function () {
		$(".motivos .entrega").addClass("animated fadeInDown");
	}, 3000);

 

[washalbano 54]

Olá! Mostre-nos o que fazem as classes .animated e .fadInDown
Creio que a solução possa ser feita apenas com css

[Marlon Pacheco 132]

Xará,

 

Acho que tu vai ter que usar o setInterval.

Pelo que vi, tu tá usando a Animate CSS.

Acredito que usando o setInterval e limpando as classes inseridas no final da função, tu consegue o efeito que tu precisa.

[marlonboecker 3]

1 hora atrás, Marlon Pacheco disse:

Xará,

 

Acho que tu vai ter que usar o setInterval.

Pelo que vi, tu tá usando a Animate CSS.

Acredito que usando o setInterval e limpando as classes inseridas no final da função, tu consegue o efeito que tu precisa.

 

 

Boa tarde Xará,

 

Cara é o seguinte, minha animação inteira demora 16 segundos, como faço o time do setInterval?

Eu limpei as classes e deu certo ele volta, mas estou com problema no tempo o setInterval.

 

Eu programei o setInterval para 18000, só que a animação demora 18 segundos para iniciar pela primeira vez

[Marlon Pacheco 132]

Cara,

 

Consegue postar no Codepen um exemplo?

Tu pode tentar inserir o teu código com o setTimeout dentro do setInterval.

Não testei, mas algo assim:

setInterval(function(){
  setTimeout(function () {
      $(".titulo-banner").addClass("animated fadeInDown");
  }, 400);
  setTimeout(function () {
      $(".hamburguer").addClass("animated fadeInDown");
  }, 800);
  setTimeout(function () {
      $(".motivos .preco").addClass("animated fadeInDown");
  }, 2000);
  setTimeout(function () {
      $(".motivos .entrega").addClass("animated fadeInDown");
  }, 3000);
}, 16000);

 

[marlonboecker 3]

Tu consegue ver a animação funcionando aqui

[Marlon Pacheco 132]

Bloqueado. 

Estou sem meu note, tô usando o note da empresa e tem firewall cloud.

[marlonboecker 3]

Agora, Marlon Pacheco disse:

Bloqueado. 

Estou sem meu note, tô usando o note da empresa e tem firewall cloud.

 

Que pena, mas então, está funcionando certinho como deveria, só tem um problema, quando carrega o site ele demora 18 segundos para iniciar as animações, mas creio que não tem outra solução, vou fazer um pequena gabiarra que acho que resolverá

[marlonboecker 3]

Xará, resolvi assim:

 

	function banner(){
		setTimeout(function () {
		$(".titulo-banner").addClass("animated fadeInDown");
	}, 400);
	setTimeout(function () {
		$(".hamburguer").addClass("animated fadeInDown");
	}, 800);
	setTimeout(function () {
		$(".motivos .preco").addClass("animated fadeInDown");
	}, 2000);
	setTimeout(function () {
		$(".motivos .entrega").addClass("animated fadeInDown");
	}, 3000);

	setTimeout(function () {
		$(".motivos .omelhor").addClass("animated fadeInDown");
	}, 4000);
	
	setTimeout(function () {
		$(".banner").addClass("animated fadeOutRight");
	}, 8000);

	setTimeout(function () {
		$(".banner-2").addClass("animated fadeInLeft");
	}, 8000);

	setTimeout(function () {
		$(".fase-1").addClass("animated fadeInLeft");
	}, 10000);


	setTimeout(function () {
		$(".fase-2").addClass("animated fadeInLeft");
	}, 11000);

	setTimeout(function () {
		$(".fase-3").addClass("animated fadeInLeft");
	}, 12000);

	setTimeout(function () {
		$(".banner-2").addClass("animated fadeOutRight");
	}, 15000);

	//limpando classes
	
		$(".titulo-banner").removeClass("animated fadeInDown");
		$(".hamburguer").removeClass("animated fadeInDown");
		$(".motivos .preco").removeClass("animated fadeInDown");
		$(".motivos .entrega").removeClass("animated fadeInDown");
		$(".motivos .omelhor").removeClass("animated fadeInDown");
		$(".banner").removeClass("animated fadeOutRight");
		$(".banner-2").removeClass("animated fadeInLeft");
		$(".fase-1").removeClass("animated fadeInLeft");
		$(".fase-2").removeClass("animated fadeInLeft");
		$(".fase-3").removeClass("animated fadeInLeft");
		$(".banner-2").removeClass("animated fadeOutRight");
	
	}

	banner();
	setInterval(function(){
		banner();
	}, 20000);