Podes ver la explicacion completa sobre Fx.Slide de Mootools en mi blog,
donde tambien podras encontrar mas informacion, ejemplos y tutoriales sobre Mootools en Castellano como asi tambien
sobre algunos otros temas.

Suscribite a mi blog para recibir articulos directamente en tu lector de Feeds favorito.

Efectos con Mootools: Fx.Slide

slideIn 
  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. });
Elemento 1
Ver Efecto
slideOut 
  1. var slider2 = new Fx.Slide('dos');
  2. $('efecto-2').addEvent('click', function(ev)
  3. {
  4. 	new Event(ev).stop();
  5. 	slider2.slideOut();
  6. });
Elemento 2
Ver Efecto
hide 
  1. var slider3 = new Fx.Slide('tres');
  2. $('efecto-3').addEvent('click', function(ev)
  3. {
  4. 	new Event(ev).stop();
  5. 	slider3.hide();
  6. });
Elemento 3
Ver Efecto
show 
  1. var slider4 = new Fx.Slide('cuatro');
  2. //slider4.hide();
  3. $('efecto-4').addEvent('click', function(ev)
  4. {
  5. 	new Event(ev).stop();
  6. 	slider4.show();
  7. });
Elemento 4
Ver Efecto
toggle 
  1. var slider5 = new Fx.Slide('cinco');
  2. $('efecto-5').addEvent('click', function(ev)
  3. {
  4. 	new Event(ev).stop();
  5. 	slider5.toggle();
  6. });
Elemento 5
Ver Efecto
mode (opcion) 
  1. var slider6 = new Fx.Slide('seis', {mode:'horizontal'});
  2. $('efecto-6').addEvent('click', function(ev)
  3. {
  4. 	new Event(ev).stop();
  5. 	slider6.toggle();
  6. });
Elemento 6
Ver Efecto
Mas opciones y eventos 
  1. var slider7 = new Fx.Slide('siete', 
  2. {
  3. 	mode:'horizontal',
  4. 	duration: 1000,
  5. 	wait: false,
  6. 	onComplete: function()
  7. 	{
  8. 		alert('Termino');
  9. 	}
  10. });
  11. $('efecto-7').addEvent('click', function(ev)
  12. {
  13. 	new Event(ev).stop();
  14. 	slider7.toggle();
  15. });
Elemento 7
Ver Efecto