[Resolvido] Fade In e Fade Out

[BRKAW 0]

Olá! Fiz um código que tem a função de fade in e fade out

 

function fadeOut(id, time) {
target = document.getElementById(id);
alpha = 100;
timer = (time*1000)/50;
var i = setInterval(
		function() {
			if (alpha <= 0)
				clearInterval(i);
			setAlpha(target, alpha);
			alpha -= 2;
		}, timer);
}

function fadeIn(id, time) {
target = document.getElementById(id);
alpha = 0;
timer = (time*1000)/50;
var i = setInterval(
		function() {
			if (alpha >= 100)
				clearInterval(i);
			setAlpha(target, alpha);
			alpha += 2;
		}, timer);
}

function setAlpha(target, alpha) {
target.style.filter = "alpha(opacity="+ alpha +")";
target.style.opacity = alpha/100;
}

 

Ele funciona muito bem utilizando o efeito na DIV, fica mais o menos assim:

 

<input onfocus="javascript:fadeOut('alvo', 0.1)" type="text" />
	fade out | 
	<input onfocus="javascript:fadeIn('alvo', 0.1)" type="text" />
	fade in
	<div id="alvo" >
		Teste	</div>

 

Porém meu problema é o seguinte:

 

- Quando acesso a página a div com o id='alvo' fica amostra logo que a página é acessada, eu gostaria que ela fosse escondida e ai quando eu desse o click no input de fade in ai sim ela aparecesse.

 

- Já tentei utilizar a display='none' no style da div, só que ai ela some e não apareçe mais!

 

Será que alguem saberia me ajudar?

 

Agradeço desde já!

[Patrique 0]

Terá que utilizar display none, na hora que quiser que apareça utilize

 

document.getElementById('nome-id-div').style.display = 'block';

 

Lembrando que o elemento div deve esta com o style definido em none para este exemplo acima...

 

<div id="nome-id-div" style="display:none;">conteúdo</div>

 

Se tiver que desaparecer novamente utilize

 

document.getElementById('nome-id-div').style.display = 'none';

 

[]'s

[Ted k' 126]

Prefiro até usa o style no CSS, como um dos exemplos do Nobre Patrique, pois carrega primeiro do que o javascript.

[Patrique 0]

Realmente é o mais indicado Ted, uma vez que se torna mais acessível, contando que as vezes o javascript pode esta desabilitado no navegador do usuário.

 

[]'s

[BRKAW 0]

Acredito que o CSS sejá apenas para integrar no Fade da DIV.

 

Nunca vi nem um script em CSS que faça isso!

 

Terá que utilizar display none, na hora que quiser que apareça utilize

 

document.getElementById('nome-id-div').style.display = 'block';

 

Lembrando que o elemento div deve esta com o style definido em none para este exemplo acima...

 

<div id="nome-id-div" style="display:none;">conteúdo</div>

 

Se tiver que desaparecer novamente utilize

 

document.getElementById('nome-id-div').style.display = 'none';

 

[]'s

 

Ah só pra agradecer Patrique! Funcionou legal!