Publicado em 20 de dez.

Adicionar efeito alpha na transição de páginas

Olá pessoa como vão. Trabalho com desenvolvimento e mais específico em PHP e MySQL.

Estou fazendo um site que não da refresh, tipo aparece uma imagem carregando na área que chama o conteúdo do link no caso to jogando a página chamada dentro de uma div.

Minha dúvida é como faço para que a pagina ATUAL suma gradualmente dem alpha 100 a 10 porexemplo e a nova venha aparecendo gradualmente de 10 a 100.

Existe como eu fazer isso?

Segue abaixo meu codigo para verem como estou fazendo, se acharem que tem algo errado, ou que pode ficar mlehor aceito susgestões, pois estou no inínio do meu aprendizado com JS.

código "selectCustomer.js"

// JavaScript Document
var xmlHttp

function showCustomer(str) {
xmlHttp=GetXmlHttpObject()

 if (xmlHttp==null) {
	alert ("Seu navegador são suporta HTTP Request")
	return
 }
var url=str
 if(url.indexOf("?")==-1) {
	url=url+"?"
 } else {
 url=url+"&"
	}

url=url+"sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}

function stateChanged() {
 if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") {
	var texto = xmlHttp.responseText;
	texto = texto.replace(/\+/g," ");
	texto = unescape(texto);
	document.getElementById("txtHint").innerHTML=texto;
	document.getElementById("aguarde").style.display = "none";
 }
 if(xmlHttp.readyState==1) {
	document.getElementById("aguarde").style.display = "block";
	document.getElementById("aguarde").innerHTML="<center><br><br><img src='imagens/carregando.gif' title=''>Carregando.</center>";
 }
 if(xmlHttp.readyState==2) {
	document.getElementById("aguarde").style.display = "block";
	document.getElementById("aguarde").innerHTML="<center><br><br><img src='imagens/carregando.gif' title=''>Carregando..</center>";
 }
 if(xmlHttp.readyState==3) {
	document.getElementById("aguarde").style.display = "block";
	document.getElementById("aguarde").innerHTML="<center><br><br><img src='imagens/carregando.gif' title=''>Carregando...</center>";
 }
}

function GetXmlHttpObject() {
var objXMLHttp=null
 if (window.XMLHttpRequest) {
	objXMLHttp=new XMLHttpRequest()
 } else if (window.ActiveXObject) {
 objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
	}
 return objXMLHttp
}

Agora na página principal do site tenho:

<script src="js/selectCustomer.js"></script>
<script language="javascript">

<!-- //Ajax

 function chama(str) {
 showCustomer(str);
	}

-->

</script>
<body onload="chama('capa.html')">
 <tr>
	<td>
	<div id="txtHint"></div>
 <div id="aguarde" style="left:500px; position:absolute; top:400px; background-color: #FFFFFF; z-index=10; filter: Alpha(Opacity=30);"></div></td>
</body>

Se algume puder me ajudar agradeço!

Discussão (3)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Carregando comentários...

</script> <body onload="chama('capa.html')"> <tr> <td> <div id="txtHint"></div> <div id="aguarde" style="left:500px; position:absolute; top:400px; background-color: #FFFFFF; z-index=10; filter: Alpha(Opacity=30);"></div></td> </body>