Foros del Web » Programando para Internet » Javascript »

Fade in y out para div class

Estas en el tema de Fade in y out para div class en el foro de Javascript en Foros del Web. Hola, Quisiera saber como se puede generar el efecto fade in y fade out para una clase de div, es decir, hacerlo a traves de ...
  #1 (permalink)  
Antiguo 07/04/2009, 14:45
 
Fecha de Ingreso: abril-2009
Mensajes: 7
Antigüedad: 15 años
Puntos: 0
Fade in y out para div class

Hola,

Quisiera saber como se puede generar el efecto fade in y fade out para una clase de div, es decir, hacerlo a traves de
Código:
<div class="clase"></div>
.

Lo que encontré, navegando aquí en los foros me sirvió pero solo para las id de las div, de manera que si quisiera hacerlo para más de una no sirve ya que el código solo funciona para un solo tipo de div, lo que quiero es que funcione para todas las que requiera que aparezcan.

Código:
<style type="text/css">
 #escondido{
 width:400px;
 height:200px;
 background:steelblue;
 color:#fff;
 display:none;
 }
</style>
<script type="text/javascript">
var color = 0;
var suma = 10;
function aparecer(){
var obj = document.getElementById('escondido');
obj.style.display = "block";
color += suma;
if (!(color>=110)){
obj.style.filter = 'alpha(opacity='+color+')';
			 obj.style.opacity = color /100;
			 obj.style.MozOpacity = color /100;
			 obj.style.KHTMLOpacity = color /100;
		window.setTimeout ("aparecer();", 100);
}
}
function desvanecer() {
var obj2 = document.getElementById('escondido');
		color -= suma;
	if (!(color <=-10)){
	obj2.style.filter = 'alpha(opacity='+color+')';
			 obj2.style.opacity = color /100;
			 obj2.style.MozOpacity = color /100;
			 obj2.style.KHTMLOpacity = color /100;
		window.setTimeout ("desvanecer();", 100);
	}
	}
	
function llama(){
if (color<=0){
  aparecer();
}
else {
  desvanecer();
}
}
</script>
 </head>
<body>
 <span onclick="llama();">Click Aqui</span>
 <div id="escondido">
  <p>Lorem ipsum vel commune praesent maiestatis in, no suavitate 
  persecuti sententiae ius, ea cum facete sanctus   detracto. Saepe 
  recteque tractatos qui te, ius summo mentitum at. Sed etiam option 
  delicatissimi ad. Alia altera lobortis vim id, id iisque commune  
  cum.</p>
 </div>
</body>
</html>
Espero que me puedan ayudar.
Muchas Gracias y Saludos!!!!
  #2 (permalink)  
Antiguo 07/04/2009, 15:25
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 20 años
Puntos: 834
Respuesta: Fade in y out para div class

Probá así:
Código PHP:
<!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>
<
style type="text/css">
 .
oc{
 
width:400px;
 
height:200px;
 
background:steelblue;
 
color:#fff;
 
display:none;
 }
</
style>
<
script type="text/javascript">
var 
suma 10;
function 
aparecer(){
this.intervalo=1;
var 
obj this;
this.colorthis.color || 0;

obj.style.display "block";
this.color += suma;
if (!(
this.color>=110)){
            
obj.style.filter 'alpha(opacity='+this.color+')';
             
obj.style.opacity this.color /100;
             
obj.style.MozOpacity this.color /100;
             
obj.style.KHTMLOpacity this.color /100;
        
window.setTimeout (function(){aparecer.call(obj);}, 100);
}else{
this.intervalo=0;
}
}
function 
desvanecer() {
this.intervalo=1;
    var 
obj2 this;
    
this.colorthis.color || 0;
    
this.color -= suma;
    if (!(
this.color <=-10)){
            
obj2.style.filter 'alpha(opacity='+this.color+')';
             
obj2.style.opacity this.color /100;
             
obj2.style.MozOpacity this.color /100;
             
obj2.style.KHTMLOpacity this.color /100;
        
window.setTimeout (function(){desvanecer.call(obj2);}, 100);
    }else{
        
obj2.style.display "none";
        
this.intervalo=0;
    }
    }
    
function 
llama(){
if(
this.intervalo)return;
if (!
this.color || this.color<0){
  
aparecer.call(this);
}
else {
  
desvanecer.call(this);
}
}
</script>
 </head>
<body>
 <span onclick="llama.call(document.getElementById('escondido'));">Click Aqui</span>
 <div class="oc" id="escondido">
  <p>Lorem ipsum vel commune praesent maiestatis in, no suavitate 
  persecuti sententiae ius, ea cum facete sanctus   detracto. Saepe 
  recteque tractatos qui te, ius summo mentitum at. Sed etiam option 
  delicatissimi ad. Alia altera lobortis vim id, id iisque commune  
  cum.</p>
 </div>
 
 <br />
<span onclick="llama.call(document.getElementById('escondido2'));">Click Aqui</span>
 <div class="oc" id="escondido2">
  <p>Lorem ipsum vel commune praesent maiestatis in, no suavitate 
  persecuti sententiae ius, ea cum facete sanctus   detracto. Saepe 
  recteque tractatos qui te, ius summo mentitum at. Sed etiam option 
  delicatissimi ad. Alia altera lobortis vim id, id iisque commune  
  cum.</p>
 </div>
</body>
</html> 
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 05:40.