Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Wilson Bhering

Temporizadores não funcionam com fade

Por , em Javascript

Recommended Posts

Wilson Bhering    0

Wilson Bhering
Postado

Boa noite galera do imasters, primeiramente obrigado por sempre estarem sanando as minhas dúvidas!
Bom, passei a tarde quebrando a cabeça com um problema aqui, vocês podem me ajudar?
Estou tentando fazer um efeito de fade suave em duas divs, mas não estou conseguindo faze-lo.
Segue o codigo do HTML, CSS e java:

 

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" src="menu.js">
</script>
<link rel="stylesheet" type="text/css" href="estilo/inicio.css" />
</head>

<body>
<div id="area_centro">

<a href="#"><div id="fundofoto"></div></a>
<div id="abrefoto"></div>
</div>
<a href="javascript:amplia()" onclick="abre(imagens/img01.jpg)"><img src="imagens/img01.jpg" /></a>

</body>
</html>

CSS:

@charset "utf-8";
/* CSS Document */

*{
	padding:0 auto;
	margin:0 auto;
}

body{
	background:#0FF;
	width:auto;
	height:auto;
	margin:0 auto;
}

#area_centro{
	width:1000px;
	height:auto;
	background:#F30;
	margin:auto;
}


#abrefoto{
	background:#F00;
	width:45%;
	height:45%;
	position:absolute;
	margin:auto;
	display:none;
	z-index:101;
	visibility:visible;
}

#fundofoto{
	background:#00F;
	width:100%;
	height:100%;
	position:absolute;
	margin:0px;
	display:none;
	visibility:visible;
}

Javascrip:

function amplia()
{
	document.getElementById("abrefoto").style.display="block";
	document.getElementById("fundofoto").style.display="block";
	document.getElementById("abrefoto").innerHTML="<a href='javascript:fecha()'>Fechar</a>";
	
}


function fecha()
{
var i= 10;
for(i=10;i>0;i--)
{
	setInterval(function ola() { document.getElementById("abrefoto").style.opacity="0." + i; },1000);

}
}

O problema é o seguinte, através deste loop eu consigo diminuir a opacidade à zero, mas não de uma forma suave, mesmo usando o temporizador setTimeout, SetInterval, ou utilizando um while.... Não sei o que fazer, segundo a minha lógica("Deve estar errada"), era para funcionar... Alguém pode me ajudar?
Grato.
Wilson.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Anderson Danilo    43

Anderson Danilo
Postado

sua lógica está certa, porém o "passo" desta animação é muito grande.

  • Não use for, isso pode travar o navegador, use o setInterval
  • Diminua o passo, tipo uns 0.02, ou 0.002
  • Aumente a velocidade do setInterval, tipo 100ms ou até 50ms

Compartilhar este post

Link para o post
Compartilhar em outros sites

Wilson Bhering    0

Wilson Bhering
Postado

 

sua lógica está certa, porém o "passo" desta animação é muito grande.

  • Não use for, isso pode travar o navegador, use o setInterval
  • Diminua o passo, tipo uns 0.02, ou 0.002
  • Aumente a velocidade do setInterval, tipo 100ms ou até 50ms

Anderson, Muito obrigado pela dica hehe, estava acostumado com PHP, lá eu usava muito este loop for, porém graças a sua dica, agora só uso setInterval, e sempre está funcionando!Muito obrigado!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito