Pongo el tema aqui porque creo que el error esta en la parte Js.
Tengo una capa con un boton para expandirla verticalmente. Al expandirla, ademas muestra determinado contenido. Hasta ahi todo funciona bien.
Quiero que ese contenido que se muestra, no aparezca de golpe. si no que haga un 'fade-in'. He usado el siguiente codigo, pero no hace la transicion, lo sigue mostrando de golpe:
CSS:
Código PHP:
#contenido_tarea{
display: none;
clear: both;
width: 100%;
height: 400px;
border-top: 1px solid #CCC;
padding-top: 15px;
font-size: 14px;
opacity:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
Javascript
:
Código PHP:
function div_on(){
var imagen = document.getElementById("img_ver_mas");
var cont_tarea = document.getElementById("contenido_tarea");
var tarea = document.getElementById("tarea");
if(imagen.src == url+"imagenes/ver_mas_over.png" || imagen.src == url+"imagenes/ver_mas.png"){
cont_tarea.style.display="block";
cont_tarea.style.opacity="100";
tarea.style.height="500px";
imagen.src='imagenes/ver_menos.png';
imagen.alt='Ver menos';
imagen.title='Ver menos';
}