Ir para conteúdo

POWERED BY:

Arquivado

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

InSoNiA

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

Por , em Javascript

Recommended Posts

InSoNiA    0

InSoNiA
Postado

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!

Compartilhar este post

Link para o post
Compartilhar em outros sites

DSerma    19

DSerma
Postado

Já ouviu falar em JQuery ???

 

 

Com essa frameWork você pode fazer diversas animações em sua página, inclusive o "Fade", que é oq você qr....

 

Mais sobre isso NESTE LINK.

 

 

Abraços..

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