fade in para varias capas

chicotoy · #1 (**permalink**) 14/12/2012, 13:50

hola

He cogido este script de una página. Mi capa #micapa aparece haciendo fade in pero si clono el script para otras capas con efecto similar (cambiando micapa por micapa2)sólo me funciona una de ellas, error de bulto, lo sé, pero ¿dónde?

function micapa(){var fade=0,micapa=document.getElementById("micapa").st yle,ms=(micapa.opacity==0)?0:1,pace=setInterval(Fa de,80);function Fade(){if(fade<100){fade+=1;if(ms)micapa.filter="a lpha(opacity="+fade+")";else micapa.opacity=(fade/100)}else clearInterval(pace)}};
window.onload=micapa;

emprear · #2 (**permalink**) 14/12/2012, 21:05

Tendrías que identificar las capas a las que querés aplicar el efecto y que el id de la capa se pase como variable

Ejemplo:

Código HTML:

Ver original<!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>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
#micapa, #micapa2{
opacity: 0;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
function entrar(){
var capas = new Array("micapa", "micapa2");
var i;
for(i in capas){
micapa(capas[i]);
}
}
function micapa(lacapa){var fade=0,micapa=document.getElementById(lacapa).style,ms=(micapa.opacity==0)?0:1,pace=setInterval(Fade,80);
function Fade(){if(fade<100){fade+=1;if(ms)micapa.filter="alpha(opacity="+fade+")";else micapa.opacity=(fade/100)}else clearInterval(pace)}};
window.onload=entrar; 
//]]>
</script>
</head>
<body>
<div id="micapa">
    texto
</div>
<div id="micapa2">
    texto 2
</div>
</body>
</html>

Y acostumbrate siempre a usar el highlight del editor para evitar errores en la sintáxis, si te fijas hay varias palabras que se cortan e inutilizan tu código (sty le, Fa de, a lpha)

Saludos

chicotoy · #3 (**permalink**) 15/12/2012, 00:56

Muchas gracias, lo del array es la solución para aplicar el mismo efecto a todas las capas, pero ¿puedo clonar la función para que la temporización sea distinta haciendo varios arrays? unas capas en 80 ms y otras en 200 ms

Esto no funciona:

Código Javascript:

Ver originalfunction entrar(){
    var capas = new Array("micapa", "micapa2");
    var i;
    for(i in capas){
    micapa(capas[i]);
    }
    }
    function micapa(lacapa){var fade=0,micapa=document.getElementById(lacapa).style,ms=(micapa.opacity==0)?0:1,pace=setInterval(Fade,80);
    function Fade(){if(fade<100){fade+=1;if(ms)micapa.filter="alpha(opacity="+fade+")";else micapa.opacity=(fade/100)}else clearInterval(pace)}};
    window.onload=entrar;
 
function entrarmastarde(){
    var capasmt = new Array("micapa3", "micapa4");
    var i;
    for(i in capasmt){
    micapamt(capasmt[i]);
    }
    }
    function micapamt(lacapamt){var fade=0,micapamt=document.getElementById(lacapamt).style,ms=(micapamt.opacity==0)?0:1,pace=setInterval(Fade,200);
    function Fade(){if(fade<100){fade+=1;if(ms)micapamt.filter="alpha(opacity="+fade+")";else micapamt.opacity=(fade/100)}else clearInterval(pace)}};
    window.onload=entrarmastarde;

emprear · #4 (**permalink**) 15/12/2012, 06:12

Tu método funcionaría si hicieses esto para iniciar las funciones

Código Javascript:

Ver originalwindow.onload= function(){
        entrar();
    entrarmastarde();
}

Pero esto me parece más práctico, pasando el tiempo como parámetro, sería más flexible, podrías hacer que sea 20, 200, 50, etc agregando else if a las condiciones

Código HTML:

Ver original<!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>
<title>FadeIn Capas Múltiples</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
#micapa, #micapa2,#micapa3,#micapa4{
opacity: 0;
font-size: 18pt;
width: 100px;
height: 100px;
margin: 5px;
background: lime;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
function entrar(){
var capas = new Array("micapa", "micapa2","micapa3","micapa4");
var i;
for(i in capas){
if((capas[i] == "micapa2")||(capas[i] == "micapa4")){
micapa(capas[i],200);
}else{
micapa(capas[i],80);
}
}
}
function micapa(lacapa,tiempo){var fade=0,micapa=document.getElementById(lacapa).style,ms=(micapa.opacity==0)?0:1,pace=setInterval(Fade,tiempo);
function Fade(){if(fade<100){fade+=1;if(ms)micapa.filter="alpha(opacity="+fade+")";else micapa.opacity=(fade/100)}else clearInterval(pace)}};
window.onload=entrar; 
//]]>
</script>
</head>
<body>
<div id="micapa">
    texto
</div>
<div id="micapa2">
    texto 2
</div>
<div id="micapa3">
    texto 3
</div>
<div id="micapa4">
    texto 4
</div>
</body>
</html>

Saludos

chicotoy · #5 (**permalink**) 16/12/2012, 15:46

Muchas gracias, parece una solución bastante más elegante que la otra