Visibilidad del DIV. Efecto Fade

epoj · #1 (**permalink**) 17/02/2006, 17:19

Despues de un buen rato de haber buscado en Internet y en este foro, leyendo faqs y mediante el buscador, no he encontrado ninguna documentación que me ayude en el siguiente problema:

Necesito que unos <DIV>, que se encuentren ocultos mediante CSS (visibility:hidden) aparezcan "gradualmente", con un efecto Fading que va de la transparencia total a una opacidad del 70%...

Parece que el atributo CSS "Hidden" no es configurable, por lo que se me ocurrió que quizás era más probable con los filtro de opacidad (que son diferentes dependiendo el browser)

No puse este mensaje en CSS porque la forma de hacer este "FADE" (que es lo único que no he logrado hacer) es mediante JScript.

Desde ya, gracias a quien se tome su tiempo para ayudarme

JavierB · #2 (**permalink**) 18/02/2006, 04:22

Hola epoj

Prueba este código a ver si te sirve:

Código:

<html>
<head>
<title>Untitled</title>
<style type="text/css">
#pepe {width:100px; height:50px; background:red; filter:alpha(opacity=0); -moz-opacity:0;}
</style>
<script type="text/javascript">
var tempo;
var opa = 0;
function ver() {
  opa+=10;
  if (opa==70) clearInterval(tempo);
  obj = document.getElementById('pepe');
  if (document.all)
    obj.style.filter = 'alpha(opacity='+opa+')';
  else
    obj.style.MozOpacity = opa/100; 
}
</script>
</head>
<body>
<div id="pepe">Hola</div>
<input type="button" value="Mostrar" onclick="tempo=setInterval('ver()',500)" />
</body>
</html>

Saludos,

epoj · #3 (**permalink**) 19/02/2006, 10:25

Si que me sirve!
me diste mas que una guía. Muchas gracias!.

JavierB · #4 (**permalink**) 19/02/2006, 10:51

Muchas de nada. Me alegro de que te haya funcionado. Hasta otra

dobled · #5 (**permalink**) 19/04/2006, 10:33

excelente justo lo que necesitaba pero se puede hacer mas suave el efecto no tan duro.

Gracias.

Holden · #6 (**permalink**) 19/04/2006, 11:32

yo le pegaría una miradita a http://www.openrico.org

Saludos,

JavierB · #7 (**permalink**) 19/04/2006, 13:08

Hola dobled

Prueba poniendo distintos valores en esta línea:

opa+=10;

o cambiando el intervalo de tiempo:

<input type="button" value="Mostrar" onclick="tempo=setInterval('ver()',500)" />

Saludos,

dobled · #8 (**permalink**) 19/04/2006, 15:44

igual es dura la salida del fade comparada con el ejemplo de holden, pero no lo puedo aplicar..

Danitm · #9 (**permalink**) 25/06/2008, 15:06

y como se hace para que ese efecto se pueda repetir? sin tener q actualizar la pagina.

por ejemplo otro boton q la vuelva a desaparecer y q se pueda jugar con los 2,

uno hace el efecto fade apareciendo el div y el otro lo deshace.

que se pueda hacer continuamente con los botones sin actualizar la pagina