Animações Java Script

[Geanine Inglat]

Olá

Estou fazendo divs dinâmicas que aparecem apenas quando clico em um link href. Estou usando JavaScript e gostaria de saber como posso fazer para animar as divs quando se tornam visíveis, com um fade, por exemplo.

Segue o código abaixo.

 

 

JavaScript

function showDiv(pass) { 	var divs = document.getElementsByTagName('div'); 	for(i=0;i<divs.length;i++){ 		if(divs[i].id.match(pass)){//if they are 'see' divs 			if (document.getElementById) // DOM3 = IE5, NS6 			divs[i].style.visibility="visible";// show/hide 			else 			if (document.layers) // Netscape 4 			document.layers[divs[i]].display = 'visible'; 			else // IE 4 			document.all.divs[i].visibility = 'visible'; 		} else { 			if (document.getElementById) 			divs[i].style.visibility="hidden"; 			else 			if (document.layers) // Netscape 4 			document.divs[i].visibility = 'hidden'; 			else // IE 4 			document.all.divs[i].visibility = 'hidden'; 		} 	} }

HTML

	<a href="javascript:showDiv('blue')">Azul</a> 	<a href="javascript:showDiv('yellow')">Amarelo</a>	<a href="javascript:showDiv('green')">Verde</a> 	<a href="javascript:showDiv('red')">Vermelho</a>		<div id="blue" style="  position: absolute;							left:100px;							top:100px;							background-color: blue;							border: 1px none #000000;							height:300px;							width:300px"> 									blue	</div>		<div id="yellow" style="position: absolute;							left:100px;						  	top:100px;							background-color: yellow;							border: 1px none #000000;							height:300px;							width:300px;							visibility: hidden"> 									yellow	</div><!-- continua com divs semelhantes -->

Obrigada.

[DiF]

Olá,

 

você está tentando reinventar a roda  

o jQuery é bem mais prático quanto a esta questão. veja este tópico, que é exatamente a sua dúvida.

 

http://forum.clubedohardware.com.br/forums/topic/1068246-ajuda-como-posso-ocultar-uma-div-espec%C3%ADfica-com-javascript/

[Geanine Inglat]

Hahahah sim sim, me expressei mal

Na real a ideia é fazer com JQuery sim, eu até tentei usar a função FadeOut/FadeIn, o problema é que eu não consegui referenciar o objeto para chamar a função, que neste caso, seria o divs... Como ficaria?

[DiF]

Então, como seu objetivo é usar jQuery, e não reinventar a roda rsrsrs veja este exemplo, quando você sabe a quantidade de divs. (acho mais pratico assim.), caso queira fazer com N divs aí terias que mudar um pouco para que ele referencie o proprio objeto com a palavra chave: $(this)

 

html:

<a href="#" class="blue">Azul</a> <a href="#" class="yellow">Amarelo</a>	<div id="blue"> 									blue	</div>		<div id="yellow"> 									yellow	</div>

Css:

#blue{     position: absolute;	left:100px;	top:100px;	background-color: blue;	border: 1px none #000000;	height:300px;	width:300px; }#yellow{    position: absolute;	left:100px;	top:100px;	background-color: yellow;	border: 1px none #000000;	height:300px;	width:300px;     display: none;  }

Dispensarei comentários nesta parte, pois é de fácil entendimento. falarei especificamente na parte do jQuery.

$(document).ready(function(){     var blue = $('#blue');    var yellow = $('#yellow');         $("a").click(function() {         var className = this.className;         switch(className){             case 'blue':                           blue.fadeIn("slow");                          yellow.fadeOut("fast");                          break;             case 'yellow':                            blue.fadeOut("fast");                          yellow.fadeIn("slow");                          break;           }            });  });

Linhas 1 e 19, Inicializa o DOM

Linhas 2 e 3, armazena em variáveis cada div em específico

Linhas 5 e 18, atribui ao elemento a o evento de click

Linha 6, armazena em uma variável o nome da classe  do elemento. A keyword this serve para indicar o objeto que foi clicado

Linhas 7  e 16, função switch() que recebe o parametro a variável que contem o nome da classe

Linha 8 a 11, indica que se o nome da classe for blue, o DIV azul irá aparecer e o DIV amarelo irá sumir.

Linhas 12 a 15, indica que se o nome da classe for yellow, o DIV azul irá sumir e o DIV amarelo irá aparecer.

 

Veja o exemplo online

[Geanine Inglat]

Aee, funcionou perfeito!

 

Valeu cara

Tava quebrando a cabeça com isso daí ahuahuah