Efectos con Mootools: Fx.Slide
24 de July, 2007
¿Qué es Fx.Slide?
Fx.Slide nos permite ocultar/mostrar elementos mediante una transición de movimiento, deslizándolos a medida que se van ocultando o apareciendo. Ver Ejemplos de Fx.Slide.
Creando una instancia de Fx.Slide
1 | var miSlide = new Fx.Slide('elemento', {opciones}); |
Métodos
slideIn
Nos permite deslizar nuestro elemento a medida que va apareciendo. Se puede deslizar horizontal o verticalmente.
1 2 | var slider1 = new Fx.Slide('uno'); slider1.slideIn(); |
slideOut
Nos permite deslizar nuestro elemento a medida que va desapareciendo. Se puede deslizar horizontal o verticalmente.
1 2 | var slider2 = new Fx.Slide('dos'); slider2.slideOut(); |
hide
Oculta nuestro elemento instantáneamente, sin transición.
1 2 | var slider3 = new Fx.Slide('tres'); slider3.hide(); |
show
Muestra nuestro elemento instantáneamente, sin transición.
1 2 | var slider4 = new Fx.Slide('cuatro'); slider4.show(); |
toggle
Muestra u oculta nuestro elemento dependiendo de su estado actual. Si esta oculto, lo muestra, si esta visible, lo oculta.
1 2 | var slider5 = new Fx.Slide('cinco'); slider5.toggle(); |
Opciones
mode
Mode nos permite cambiar la forma en la que aparece o desaparece nuestro elemento, puede ser ‘horizontal’ o ‘vertical’. Predefinido: ‘vertical’
1 2 | var slider6 = new Fx.Slide('seis', {mode:'horizontal'}); slider6.toggle(); |
Mas opciones
También se pueden usar las opciones y eventos que conocemos de Fx.Style
1 2 3 4 5 6 7 8 9 10 11 | var slider7 = new Fx.Slide('siete', { mode:'horizontal', duration: 1000, wait: false, onComplete: function() { alert('Termino'); } }); slider7.toggle(); |
Extras
Popularity: 22% [?]
Otros artículos
12 comentarios en “Efectos con Mootools: Fx.Slide”
Deja tu comentario
El blog funciona con Wordpress y Simpla theme
July 31, 2007 a las 10:19 pm
Muy buenos y bien explicados los efectos sr Federico felicitaciones!
August 1, 2007 a las 11:07 pm
Gracias!
August 3, 2007 a las 12:11 pm
Exelente explicacion gracias
October 3, 2007 a las 6:58 pm
Hola, muy buenos ejemplos tienes aca. Tengo una pregunta, tengo una pagina con varios id’s iguales, o bien distintos pero variables y dinamicos.
Necesito hacer un toggle para cada uno pero ojala uno que sea unico y sirva para todos, no un script por cada div que quiero “togglear”.
Es posible esto?
October 3, 2007 a las 8:26 pm
Hola Tomas, seguramente puedas adaptar este ejemplo: link
Saludos
May 27, 2008 a las 5:44 pm
muy bueno.
Y si uso el método “toggle” pero quiero que al cargar la pagina el contenido a togglear este oculto que le tengo que agregar?
May 27, 2008 a las 5:47 pm
Mira este ejemplo:
click
May 27, 2008 a las 6:04 pm
ya lo vi!
mySlide.hide(); //al principio.
soy nuevo en esto.
gracias.
May 29, 2008 a las 10:04 am
Buenisimo!
October 27, 2008 a las 10:42 am
Hola Federico
verás, estoy intentado implementar esta función en una web y tengo un problema en IE7
En toogle muestro un div posicionado absolutamente q a su vez contiene un span con una imagen.
El problema es que en IE cuando el div q hace el slide esta oculto, el span contenido en el div aparece fuera del área del slide, viendose la imagen que contiene.
Pero como una imagen vale más que mil palabras, te dejo aquí la maqueta (muy poco desarrollada) del sitio en cuestión. Te agradecería muchísimo que le echaras un vistazo y me comentaras como solucionarlo.
En cualquier caso, muchísimas gracias por tu gran aportación
November 18, 2008 a las 11:14 am
Soy nuevo en esto de mootools…si bien entiendo la mayoría no me queda claro por qué y de dónde sale el parámetro de la función (ev) y qué función cumple la instancia de ésta dentro del Slide in o Slide out….
Sería posible me aclararas?
Tu tutorial es muy bueno gracias.
1.
var slider1 = new Fx.Slide(‘uno’, {duration: 500});
2.
slider1.hide();
3.
$(‘efecto-1′).addEvent(‘click’, function(ev)
4.
{
5.
new Event(ev).stop();
6.
slider1.slideIn();
7.
});
May 27, 2009 a las 4:27 pm
muy buenos ejemplos
gracias