No funciona transicion de opacidad

lenders · #1 (**permalink**) 31/01/2012, 08:46

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';

                }

lenders · #2 (**permalink**) 01/02/2012, 02:10

Perdon por el doble post >.<

Pero alguien me echa una mano please

Panino5001 · #3 (**permalink**) 01/02/2012, 02:49

El único problema que veo es que le has asignado 100 al valor de opacity y los valores van de 0 a 1. Esto, por ejemplo, funciona sin problemas:

Código PHP:

  <!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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Documento sin título</title>

<style>

#contenido_tarea{ 

    clear: both; 

    width: 100%; 

    height: 400px; 

    border-top: 1px solid #CCC; 

    padding-top: 15px; 

    font-size: 14px; 

    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;

    background:#000;

}

</style>

<script type="text/javascript">

function div_on(){ 

                var cont_tarea = document.getElementById("contenido_tarea"); 

                    cont_tarea.style.opacity="1"; 

                    

}

</script>

 
</head>

 
<body>

<div id="contenido_tarea" onclick="div_on()"></div>

</body>

</html>

lenders · #4 (**permalink**) 01/02/2012, 04:25

Gracias!

De todos modos lo que no me dejaba hacer la transicion era que estaba cambiando el 'display' de none a block.