Rotador de DIV con efecto de transicion

Martin_8 · #1 (**permalink**) 25/03/2011, 16:44

Ojala alguien me pueda ayudar con este problema.
Tengo 3 DIV que los hago rotar, hasta ahí todo bien,
pero lo que no puedo hacer es lograr un efecto de transicion (fedein) entre ellos cuando rotan. Lo que quiero hacer es que cuando aparezca el siguiente DIV este venga con efecto de transparencia y que de apogo se vaya viendo hasta quedar 100% visible.
El código que tengo hasta ahora es el de la rotocion solamente y es el siguiente (solo me falta la parte de la transicion)

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Rotador de divs</title>
<script type="text/javascript">

/* Tiempo en milisegundos de rotación de contenidos */
var INTERVALO_DE_ACTUALIZACION = 1000;

/* Id de los divs a rotar */
var ID_PRIMER_DIV = "primerDiv";
var ID_SEGUNDO_DIV = "segundoDiv";
var ID_TERCER_DIV = "tercerDiv";

var ID_INTERVALO;

var div1 = document.getElementById(ID_PRIMER_DIV);
var div2 = document.getElementById(ID_SEGUNDO_DIV);
var div3 = document.getElementById(ID_TERCER_DIV);

function inicializar(){
var div1 = document.getElementById(ID_PRIMER_DIV);
var div2 = document.getElementById(ID_SEGUNDO_DIV);
var div3 = document.getElementById(ID_TERCER_DIV);

div1.style.display = "none";
div2.style.display = "block";
div3.style.display = "none";

ID_INTERVALO = setInterval(rotarDivs, INTERVALO_DE_ACTUALIZACION);
}

function rotarDivs() {
var div1 = document.getElementById(ID_PRIMER_DIV);
var div2 = document.getElementById(ID_SEGUNDO_DIV);
var div3 = document.getElementById(ID_TERCER_DIV);

if (div1.style.display != "none") {
div1.style.display = "none";
div2.style.display = "block";
div3.style.display = "none";
} else if (div2.style.display != "none") {
div1.style.display = "none";
div2.style.display = "none";
div3.style.display = "block";
} else if (div3.style.display != "none") {
div1.style.display = "block";
div2.style.display = "none";
div3.style.display = "none";

}
}
</script>
</head>

<body onload="inicializar()">
<h1>Rotador de Divs</h1>

<div id="primerDiv">DIV1 ***</div>
<div id="segundoDiv">DIV2 ***</div>
<div id="tercerDiv">DIV3 ***</div>
</body>

dggluz · #2 (**permalink**) 25/03/2011, 19:55

Martin_8: debes modificar progresivamente la propiedad opacity (entre 0 que es transparente, y 1 que es opaco), del estilo de los divs según corresponda (para IE es la propiedad filter, seteando el alpha en un valor entre 0 y 100). Panino5001 escribió un genial artículo sobre cómo hacer transiciones en JavaScript.
Personalmente, también modificaría un poco otras cosas de tu código:

Código Javascript:

Ver originalvar rotador=function(imgs, fn)
{
    var i=0;
    fn=fn || function(x){return x;};    // La función del efecto, tanto el dominio como la imagen deben ir de 0 a 1
    var rotar=function()
    {
        for(var j=0; j<imgs.length; j++)
        {
            imgs[j].style.display='none';
        }
        var aparecer=function(img)
        {
            var start=new Date().getTime();
            var tiempoTransicion=500;    // En ms
            var transition=function()
            {
                var now=new Date().getTime();
                var progress=(now - start) / tiempoTransicion;
                if(progress<1)
                {
                    img.style.opacity=fn(progress);
                    setTimeout(function(){transition();}, 20);
                }
                else
                {
                    img.style.opacity=1;
                }
            };
        };
        // %
        imgs[i % imgs.length].style.display='block';
        aparecer(imgs[i % imgs.length]);
        i++;
        setTimeout(function(){rotar();}, 2000);    // 2000 ms de tiempo de cada imagen
    };
};
rotador([document.getElementById('div1'), document.getElementById('div2'), document.getElementById('div3')], function(x){return x * x;});

Espero que con esto tengas una base de ayuda para seguir. Cualquier cosa volvé a preguntar. ¡Suerte!

PD: no probé el código, pero supongo que debería funcionar, salvo para IE.

Martin_8 · #3 (**permalink**) 25/03/2011, 21:02

dggluz: Muchas gracias por tu ayuda.
Me ha servido de mucho y te lo agradezco pila