Temporizadores não funcionam com fade
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.
Discussão (2)
Carregando comentários...