Fade in y out para div class

rhernando · #1 (**permalink**) 07/04/2009, 14:45

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!!!!

Panino5001 · #2 (**permalink**) 07/04/2009, 15:25

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.color= this.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.color= this.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>