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>