"Simplificar" função

[Luc.Vysk 0]

Olá gente,

gostaria de saber uma meneira de simplicar uma função. Por exemplo, fiz um código que anima 5 quadrados, um pós o outro, em sequência. No entanto o código ficou cheio de função repetidas que acredito que dê para simplificar e não sei como.

 

Veja:

 

$('#quad1').animate( { 

		width:140,
		marginLeft: -20,
		marginTop: -20

	}, 100)
	.animate( { 

		width:102,
		marginLeft: 0,
		marginTop: 0

	}, 150 ,function() {
		$('#quad2').animate( { 

			width:140,
			marginLeft: -20,
			marginTop: -20

		}, 100)
		.animate( { 

			width:102,
			marginLeft: 0,
			marginTop: 0

		}, 125 , function() {
			$('#quad3').animate( { 

				width:140,
				marginLeft: -20,
				marginTop: -20

			}, 100)
			.animate( { 

				width:102,
				marginLeft: 0,
				marginTop: 0

			}, 100 , function() {
				$('#quad4').animate( { 

					width:140,
					marginLeft: -20,
					marginTop: -20

				}, 100)
				.animate( { 

					width:102,
					marginLeft: 0,
					marginTop: 0

				}, 75 , function() {
					$('#quad5').animate( { 

						width:140,
						marginLeft: -20,
						marginTop: -20

					}, 100)
					.animate( { 

						width:102,
						marginLeft: 0,
						marginTop: 0

					}, 50);

				});

			});

		});
	});

 

O que eu posso fazer para "arrumar" isso?

 

tentei criar um função, mas não deu certo não.

[Dii 15]

Eu acredito que não dê para simplificar não, porque está selecionando IDs diferentes...

[Bruno Augusto 417]

O que você poderia fazer é criar um objeto JSON fora dessas Closures, em uma variável, contendo os parâmetros width, marginLeft e marginRight que são constantes em todas as animações e então passar essa variável como primeiro argumento de animate().

[Dii 15]

Sim, o Bruno Augusto deu uma solução e tanta! Você pode fazer isso e facilitaria o seu trabalho.

[William Bruno 1501]

consegui identificar o padrão de animação de margin e largura.

porém não entendi a lógica de variação dos tempos.

 

coloca online um exemplo, para visualizarmos essa animação.

[Luc.Vysk 0]

Entendi quase nada Bruno, rs.

 

Pode dà um olhada aqui.

 

O que eu tinha feito era criar um função, normal, chamando o o "animate" para aumentar e outra função para diminuir. Pois, como o Bruno falou elas são constantes. E daí eu chamava tipo "$('#quad1').aumenta()...", no entanto não funcionou.

 

A variação do tempos e para ela ir aumentando a velocidade gradativamente, frescura, mas eu preferi assim.

 

edit:

 

Aliás, aproveitando o tópico. Se vocês irem nas páginas internas perceberão que bg do conteúdo ocupa a tela até o lado direito e inferior. Para fazer isso, eu usei js. Pois eu nem me lembro agora qual foi o problema que ocorreu para eu não fazer com CSS (esse site ficou parado um tempão).

 

Logo, eis o código com alguns comentário para vocês entendere,:

 

  if (window.innerWidth) { var larg_jan = window.innerWidth;
  } else { var larg_jan = document.documentElement.clientWidth; };
  if (window.innerHeight) { var alt_jan = window.innerHeight;
  } else { var alt_jan = document.documentElement.clientHeight; };

  var bordasl = larg_jan-998; //pega as 'sobras' laterais quando a resolução for maior que 998px (1024 com barra de rolagem)
  var bordal = bordasl/2; //calcula uma sobra, já que do lado esquerdo não vai mudar


  if (larg_jan>=998) { 	 


	  if (alt_jan<=700) {
	   		$(".conteudo_cont").css("left", (bordal+212)+"px"); //212 é o espaço esquerdo entre o limite esquerdo do layout e o começo do conteúdo
			$(".conteudo_cont").css("width", (769+bordal)+"px"); // aumenta o bg para o lado direito
			$(".conteudo_cont").css("height", "680px");// seria a altura mínima
	  } else {
		    $(".conteudo_cont").css("width", (751+bordal)+"px");
			$(".conteudo_cont").css("left", (bordal+247)+"px");
			$(".conteudo_cont").css("height", (alt_jan)+"px"); //altura proporcional a altura da janela
	  }

  } else {

	  if (alt_jan<=768) {
		  $(".conteudo_cont").css("left", "230px");
		  $(".conteudo_cont").css("height", "769px");
	  } else {
		  $(".conteudo_cont").css("left", "230px");
		 $(".conteudo_cont").css("height", "100%");
	  }
  };

[William Bruno 1501]

Aliás, aproveitando o tópico.

melhor você criar outro tópico, pois ai começa a ficar tudo muito confuso.

Um problema de cada vez, ok ?

 

a minha idéia para a animação inicial é a seguinte:

trabalhe com classes. Assim você terá um array de objetos.

 

rode um setInterval() para percorrer e ir animando esse array.

você irá andar de elemento em elemento, usando uma variavel contadora de escopo global.

 

 

-> anima o primeiro elemento

setInterval() - variavel soma +1

-> anima o segundo elemento

setInterval() - variavel soma +1

-> anima o terceiro...

 

 

qndo o contador ultrapassar o numero de elementos, você limpa o clearInterval();, e para com a contagem.

dessa forma o código ficará mais enxuto, pois você não vai precisar trabalhar com callbacks, mas apenas controlando exatamente o intervalo do setInterval(), ou de um setTimeout() recursivo