No devuelve opacidad

jlx4 · #1 (**permalink**) 12/10/2012, 15:43

Hola, tengo un div en el cual tengo imágenes que se van cambiando, a estas quiero hacerles un efecto de opacidad, un fadein y un fadeout, pero al probar el código sólo consigo realizar el cambio de opacidad una vez y no vuelve a cambiar despúes, alguien sabe como continuar el cambio?

.

CSS:

Código:

<style> 
#banner{   
    opacity:.1;  
    -webkit-transition: opacity 2s ease-in-out;  
    -moz-transition: opacity 2s ease-in-out;  
    -o-transition: opacity 2s ease-in-out;  
    -ms-transition: opacity 2s ease-in-out;      
    transition: opacity 2s ease-in-out;  } 
</style>

PHP:

Código:

<div id="banner"></div>

JAVASCRIPT (Esta es la parte de la función javascript que pretendo que haga el cambio de opacidad):

Código:

Array..........................
función Cambiar imágenes
{............

var transicion = document.getElementById("banner");  
transicion.style.opacity="1";
}

Alguien sabe cómo continuar el cambio?

emprear · #2 (**permalink**) 12/10/2012, 16:54

Debería.
Estás leyendo el DOM antes de hacer el cambio?

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[*/
 
/* estilos */ 
#banner{
background-color: red;
height: 400px;
width: 400px;
opacity: .5;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
function tr(){
var transicion = document.getElementById("banner");  
transicion.style.opacity="1";
}
window.onload = tr;
//]]>
</script>
</head>
<body>
<div id="banner">
</div>
</body>
</html>

Saludos

jlx4 · #3 (**permalink**) 12/10/2012, 17:17

Hola emprear:

Probé con tu código y sigue sin funcionar, voy a revisarlo en forma más detallada y luego te comento como me fue.

Saludos.

emprear · #4 (**permalink**) 12/10/2012, 17:25

Cita:

Iniciado por jlx4

Hola emprear:

Probé con tu código y sigue sin funcionar, voy a revisarlo en forma más detallada y luego te comento como me fue.

Saludos.

Que es lo que no funciona de mi código?
Al cargar la página el fondo aparece sin opacidad, es decir 1, si no ejecuto la función queda en .5, que es lo definido en el css

Saludos

jlx4 · #5 (**permalink**) 12/10/2012, 17:55

Cita:

Iniciado por emprear

Que es lo que no funciona de mi código?
Al cargar la página el fondo aparece sin opacidad, es decir 1, si no ejecuto la función queda en .5, que es lo definido en el css

Saludos

Ah !! claro, lo que pasa es que adaptado a mi caso no funcionaba,...........la primera vez que se presenta una imagen esta se presenta con opacidad, desde menos nítida a más nítida, pero luego de que las imágenes siguen cambiando en forma aleatoria, no continúa la opacidad, se mantienen nítidas, o sea en 1, y lo que estoy tratando de hacer es de que se vaya cambiando al mismo tiempo de que cambian las imágenes, esa es mi gran duda.

Saludos.

jlx4 · #6 (**permalink**) 13/10/2012, 16:49

No he logrado dar con la solución, alguien tiene alguna idea para que a medida que se vayan alternando las fotos se vayan cambiando con opacidad? :/