[Resolvido] Problema com setTimeOut...

[Hoch 1]

Olá, segue a função...:

 

 

		entrabanner0 = function(){
	$('#banner1').fadeIn();
	$('#banner1 .texto1').animate({
		left: '0px'
	}, 1000, function() {
		// Animation complete.
	})
	$('#banner1 .texto2').animate({
		left: '0px'
	}, 1500, function() {
		// Animation complete.
	})
	$('#banner1 .texto3').animate({
		left: '0px'
	}, 2000, function() {
		// Animation complete.
	})
	$('#banner1 .texto4').animate({
		left: '0px'
	}, 2500, function() {
		// Animation complete.
	})
	$('#banner1 .familia').delay(2000).fadeIn('slow');
	setTimeout(function(){
		saibanner1();
	}, 10000);		
}

entrabanner1 = function(){
	$('#banner1').delay(1500).fadeIn();
	$('#banner1 .texto1').delay(3000).animate({
		left: '0px'
	}, 1000, function() {
		// Animation complete.
	})
	$('#banner1 .texto2').delay(3000).animate({
		left: '0px'
	}, 1500, function() {
		// Animation complete.
	})
	$('#banner1 .texto3').delay(3000).animate({
		left: '0px'
	}, 2000, function() {
		// Animation complete.
	})
	$('#banner1 .texto4').delay(3000).animate({
		left: '0px'
	}, 2500, function() {
		// Animation complete.
		saibanner1();
	})
	$('#banner1 .familia').delay(5000).fadeIn('slow');
	setTimeout(function(){
		saibanner1();
	}, 10000);		
}

saibanner1 = function(){

	$('#banner1 .texto1').animate({
		left: '-900px'
	}, 1000, function() {
		// Animation complete.
	})
	$('#banner1 .texto2').animate({
		left: '-900px'
	}, 1500, function() {
		// Animation complete.
	})
	$('#banner1 .texto3').animate({
		left: '-900px'
	}, 2000, function() {
		// Animation complete.
	})
	$('#banner1 .texto4').animate({
		left: '-900px'
	}, 2500, function() {
		// Animation complete.
	})
	$('#banner1 .familia').delay(1000).fadeOut('slow');
	$('#banner1').delay(1500).fadeOut();
	setTimeout(function(){
		entrabanner2();
	}, 1500);
}

entrabanner2 = function(){
	$('#banner2').delay(500).fadeIn();
	$('#banner2 .rosto').delay(2000).fadeIn();
	$('#banner2 .skinal').delay(1500).fadeIn();
	$('#banner2 .texto1').delay(1000).animate({
		right: '140px'
	}, 1500, function() {
		// Animation complete.
	})
	$('#banner2 .logo').delay(1500).animate({
		right: '0px'
	}, 2000, function() {
		// Animation complete.
	});
	setTimeout(function(){
		saibanner2();
	}, 5000);
}

saibanner2 = function(){
	$('#banner2 .rosto').fadeOut();
	$('#banner2 .skinal').delay(2000).fadeOut();
	$('#banner2 .texto1').animate({
		right: '1140px'
	}, 1500, function() {
		// Animation complete.
	})
	$('#banner2 .logo').animate({
		right: '1600px'
	}, 2500, function() {
		// Animation complete.
	})
	$('#banner2').delay(2500).fadeOut();
	setTimeout(function(){
		entrabanner3();
	}, 3000);
}

entrabanner3 = function(){
	$('#banner3').delay(1000).fadeIn();
	$('#banner3 .logo').delay(2000).animate({
		left: '260px'
	}, 1500, function() {
		// Animation complete.
	})
	$('#banner3 .texto1').delay(2500).animate({
		left: '131px'
	}, 1500, function() {
		// Animation complete.
	})
	$('#banner3 .bullets1').delay(4000).fadeIn();
	$('#banner3 .bullets2').delay(4500).fadeIn();
	$('#banner3 .bullets3').delay(5000).fadeIn();
	$('#banner3 .embalagem').delay(3000).fadeIn();
	$('#banner3 .bg2').delay(3000).fadeIn();
	setTimeout(function(){
		saibanner3();
	}, 6000);

}


saibanner3 = function(){
	$('#banner3').delay(2000).fadeOut();
	$('#banner3 .bullets1').delay(900).fadeOut();
	$('#banner3 .bullets2').delay(1100).fadeOut();
	$('#banner3 .bullets3').delay(1200).fadeOut();
	$('#banner3 .embalagem').delay(1500).fadeOut();
	$('#banner3 .bg2').delay(1500).fadeOut();
	$('#banner3 .texto1').delay(1250).animate({
		left: '-1131px'
	}, 1500, function() {
		// Animation complete.
	})
	$('#banner3 .logo').delay(500).animate({
		left: '-1131px'
	}, 1500, function() {
		// Animation complete.
	})
	setTimeout(function(){
		entrabanner1();
       }, 10000);

}


entrabanner0();

$(".pagination a").click(function(){
	var banner2 = $('.current').attr('rel');
	eval("saibanner"+banner2+"()");
	$('.current').removeClass('current');

	var banner = $(this).attr('rel');
	$('#banner'+banner).addClass('current');
	eval("entrabanner"+banner+"()");

	return false
});

 

 

Resumindo, eu uso setTimeOut() para fazer com que ele executre as funções separadamente, fazendo assim, um banner rotativo...

 

Mas tem um problema...

 

Depois de um tempo parece que ele acumula do tempo e os banners vão ficando um em cima do outro, aparecem ao mesmo tempo...

Da um monte de Bug... :S

 

Tentei usar o clearTimeOut, mas eu acho que não usei a sintaxe correta e nem funcionou... :S

 

Segue um aparte do código com o clearTimeOut...:

 

entrabanner2 = function(){
	$('#banner2').delay(500).fadeIn();
	$('#banner2 .rosto').delay(2000).fadeIn();
	$('#banner2 .skinal').delay(1500).fadeIn();
	$('#banner2 .texto1').delay(1000).animate({
		right: '140px'
	}, 1500, function() {
		// Animation complete.
	})
	$('#banner2 .logo').delay(1500).animate({
		right: '0px'
	}, 2000, function() {
		// Animation complete.
	});
	var limpaTimeOut = setTimeout(function(){
		saibanner2();
		clearTimeout(limpaTimeOut);
	}, 5000);
}

saibanner2 = function(){
	$('#banner2 .rosto').fadeOut();
	$('#banner2 .skinal').delay(2000).fadeOut();
	$('#banner2 .texto1').animate({
		right: '1140px'
	}, 1500, function() {
		// Animation complete.
	})
	$('#banner2 .logo').animate({
		right: '1600px'
	}, 2500, function() {
		// Animation complete.
	})
	$('#banner2').delay(2500).fadeOut();
	var limpaTimeOut = setTimeout(function(){
		entrabanner3();
		clearTimeout(limpaTimeOut);
	}, 3000);
}

 

 

Mas mesmo assim não funcionou...

 

Alguém sabe me ajudar?

[William Bruno 1501]

poste uma imagem de como é o layout, e como é o efeito que você quer.

esse código pode e deve ser melhorado. (descartando completamente o atual).

[Hoch 1]

Olá...

 

É para ele rodar o

 

entrabanner1();

saibanner1();

entrabanner2()...

 

E assim vai indo, pois eu peguei ele pronto, só tive que faze-lo ficar automatica...

 

Ele fica assim:

 

 

O primeiro banner é a familia, o segundo é o branco com as linhas horizontais e o terceiro é o com as litras para baixo...

 

Parece que nas primeiras 4 rotações ele vai normal... dai depois ele fica daquele geito...

[Hoch 1]

Outra coisa também...

Ele roda o script umas 5 vezes sem dar problema...

Dai parece que ele intope o cache ou algo do tipo e então começam os bugs...

 

O script acelera... executa um na hora em que não é, a rotação para no meio da ação e assim vai...

[William Bruno 1501]

é q um setTimeout está sobrepondo o anterior, ai você está "somando setTimeout".

a solução não vai ser o clear, mas talvez usar um setInterval(), ou então repensar a maneira como você faz esse slide.

[Hoch 1]

Podes me dar um exemplo de como ficaria o setInterval()?

 

obrigado.

 

setInterval() não deu certo, ele trancou o meu navegador...

 

é q um setTimeout está sobrepondo o anterior, ai você está "somando setTimeout".

a solução não vai ser o clear, mas talvez usar um setInterval(), ou então repensar a maneira como você faz esse slide.

 

Só que o mais estranho é que ele repete umas 3 a 4 vezes antes e depois começa a dar aquele bug...

Com o setinterval() não funcionou...

[Hoch 1]

Resolvido...

 

Botei para não armazenar o Cache

 

<?php 
header("Pragma: no-cache");
header("Cache: no-cache");
header("Cache-Control: no-cache, must-revalidate");
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
?>

 

E atualizei o jQuery para a última versão e funcionou...

 

Vlw, abraço!