Jquery - Fadein/fadeout

[Eduardo J A Tavares 0]

Pessoal,

 

queria usar o FadeIn/FadeOut com varias divs ao mesmo tempo. Pego os dados de uma consulta e vou gerar uma lista, quando o usuario clicasse no campo seria chamada o FadeIn para detelhar o registro.

 

Atualmente o codigo está assim, mas funciona apenas para o primeiro registro.

 

<script language="javascript">
$(document).ready(
	 function () {
		 $("#btBusca").toggle(
			 function(){
				 $("#divDetalhe").fadeIn("slow");
			 },
			 function(){
				 $("#divDetalhe").fadeOut("normal");
			 }
		 );
	 }
);
</script>

 

Alguém tem alguma sugestão?

 

Obrigado,

 

Eduardo Tavares

[berkowitz 2]

Os seletores utilizados no jQuery funcionam como no CSS.

Em CSS quando você quer aplicar algo a diversas classes você faz assim:

 

.class1, .class2, .class3 { color: #FC0; }

Então no jQuery, no seu exemplo, é só fazer assim:

 

$("#divDetalhe, #outraDiv, .eAssimPorDiante").fadeIn("slow");

Entendeu?

 

ABRAX!!

[Eduardo J A Tavares 0]

O código ficou assim:

 

<script language="javascript">
$(document).ready(
	function () {
		$("#btBusca0,#btBusca1").toggle(
			function(){
				$("#divDetalhe0, #divDetalhe1").fadeIn("slow");
				document.getElementById("imgToggle").src = "img/ico-toggle-minus.png";
			},
			function(){
				$("#divDetalhe0, #divDetalhe1").fadeOut("normal");
				document.getElementById("imgToggle").src = "img/ico-toggle-plus.png";
			}
		);
	}
);
</script>

Ao clicar ele jogar os efeitos em todo ao mesmo tempo, sendo que o ideal seria apenas no selecionado.

Também esse metódo ainda nao seria o ideal porque os dados serao pegos em uma consultado podendo variar a quantidade. Eu coloquei dois apenas para testar o seu metodo...

[Eduardo J A Tavares 0]

Eu consegui resolver da seguinte forma...

 

<script language="javascript">
// Efeito FadeIn e FadeOut
$(document).ready(
	function () {
		$(<?=$sJs?>).toggle(
			function(){
				nId = this.id.slice(7);
				sDiv = "#divDetalhe"+nId;
				
				$(sDiv).fadeIn("slow");
				document.getElementById("imgToggle").src = "img/ico-toggle-minus.png";
			},
			function(){
				nId = this.id.slice(7);
				sDiv = "#divDetalhe"+nId;
				
				$(sDiv).fadeOut("normal");
				document.getElementById("imgToggle").src = "img/ico-toggle-plus.png";
			}
		);
	}
);
</script>

Os "botões" ficaram assim #btBusca1, #btBusca2, etc...

As div's estão assim... #divDetalhe1, #divDetalhe2, etc...

 

Ainda assim não é o idela porque vou precisar de um auxilio em php, porque a quatidade não fixa logo tive que usar uma arte-manha (GAMBI) para resolver.

 

$sJs = "\"#btBusca0";
for ($nI=1; $nI<count($voConteudo);$nI++) {
	$sJs .= ", #btBusca".$nI;
}
$sJs .= "\"";

Com esse código eu monto uma string com todos os "botões" que vou ter e assim passar para o JS.

 

Se alguém souber uma outra forma...