Ir para conteúdo

POWERED BY:

Arquivado

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

RedHot

[Resolvido] Fade in

Por , em Javascript

Recommended Posts

visitante_xp    0

visitante_xp
Postado

Nesse código aqui a página ja é carregada com o fade in...

<!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 type="text/javascript"> 
 
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;
}
 
</script>
<style type="text/css"> 
h1 {
	font: 210% Verdana, Arial, Sans-serif;
	padding: 10px 0px 0px 0px;
	margin: 0px;
	color: #07557F;
	text-align: center;
}
 
span, span a {
	font: 12px Verdana, Arial, Sans-serif;
	color: #27373F;
	text-align: center;
	display: block;
}
 
#exemplo {
	top: 50%;
	left: 50%;
	margin: -150px 0px 0px -200px;
	width: 400px;
	height: 300px;
	position: absolute;
}
 
#exemplo a {
	font: 11px Verdana, Arial, Sans-serif;
	color: #27373F;
	text-decoration: none;
}
 
#exemplo #alvo {
	width: 400px;
	height: 200px;
	background: #27373F;
}
</style>
</head>
<body onload="fadeIn('alvo', 0.1);">
	<div id="exemplo">
		<a href="javascript:fadeOut('alvo', 0.1)">fade out</a> | 
		<a href="javascript:fadeIn('alvo', 0.1)">fade in</a>
		<div id="alvo">
			 
		</div>
	</div>
</body>
</html>

Da uma olhada e ve se te serve...

 

Abraço!

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