Ver artículos exclusivos

Fx.Slide Empezar con un Div Oculto

Eduardo 2 Julio 2008 4 comentarios En: Mootools

El efecto “Slide” en mootools viene preparado por defecto para ocultar el contenido de un elemento.
Esto quiere decir, que al empezar la carga de la página, el elemento está visible y el efecto se encarga de ocultarlo.
¿Que pasa cuando queremos exactamente lo contrario?
Por ejemplo, empezar con un div oculto y poner un link para mostrar el contenido.
La solución:

<div id="buscar" style="display:none">
</div>
var fx = new Fx.Slide('buscar', {duration: 500});
if ($('buscar').style.display=='none') {
  fx.hide();
  $('buscar').style.display = 'block';
}
fx.toggle();

Explicación para novatos:
Establecemos la propiedad “display” a none, ocultando el div.

Cuando carga la pagina y asignamos el efecto, lo ocultamos formalmente con “hide()” y ponemos el display a “block” para hacerlo visible (pero mootools ya se ha encargado de ocultarlo via javascript).

Así, una vez “formalmente invisible”, mootools ejecutará “toggle()” y lo mostrará bien.

Jose Luis dice:
15 Julio 2008 en 12:22

Gracias me ha ayudado a no romperme la cabeza un rato! =)

Responder
Jesus dice:
7 Enero 2009 en 21:50

Me hubiese gustado un ejemplo, acabo de ver la web y simplemente sin palabras son lo maximo.

Quise el ejemplo porque soy bastante noob

Responder
david dice:
30 Julio 2010 en 19:44

Me gustaria saber como hacer para que el toggle pueda valer para varios div distintos. El codigo que tengo actualmente es el siguiente:

window.addEvent(‘domready’, function(){
var mySlide = new Fx.Slide(‘contenido-slide1′).hide();
$(‘toggle1′).addEvent(‘click’, function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});
});

desde ya muchisimas gracias

Responder
antonio gonzalez dice:
26 Agosto 2010 en 16:25

me sirvió era exactamente lo que buscaba, soy full novato en ajax y estos frameworks son una potente herramienta, muchas gracias!! saludos.

Responder