Podes ver la explicacion completa sobre Fx.Base y Fx.Style 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.Base y Fx.Style

set 
  1. var miEfecto1 = new Fx.Style('elemento-1', 'margin-left');
  2. $('elemento-1').addEvent('click', function()
  3. {
  4. 	miEfecto1.set(383);
  5. });
Click!
start 
  1. var miEfecto2 = new Fx.Style('elemento-2', 'margin-left');
  2. $('elemento-2').addEvent('click', function()
  3. {
  4. 	miEfecto2.start(0, 383);
  5. });
Click!
  1. var miEfecto3 = new Fx.Style('elemento-3', 'margin-left');
  2. $('elemento-3').addEvent('click', function()
  3. {
  4. 	miEfecto3.start(383);
  5. });
Click!
stop 
  1. var miEfecto4 = new Fx.Style('elemento-4', 'margin-left');
  2. $('elemento-4').addEvent('click', function()
  3. {
  4. 	miEfecto4.start(383);
  5. 	miEfecto4.stop();
  6. });
Click!
transition 
  1. var miEfecto5 = new Fx.Style('elemento-5', 'margin-left', 
  2. {
  3. 	transition: Fx.Transitions.Back.easeInOut
  4. });
  5. $('elemento-5').addEvent('click', function()
  6. {
  7. 	miEfecto5.start(0, 383);
  8. });
Click!
duration 
  1. var miEfecto6 = new Fx.Style('elemento-6', 'margin-left', 
  2. {
  3. 	transition: Fx.Transitions.Back.easeInOut,
  4. 	duration: 1500
  5. });
  6. $('elemento-6').addEvent('click', function()
  7. {
  8. 	miEfecto6.start(0, 383);
  9. });
Click!
unit 
  1. var miEfecto7 = new Fx.Style('elemento-7', 'margin-left', 
  2. {
  3. 	transition: Fx.Transitions.Back.easeInOut,
  4. 	duration: 1500,
  5. 	unit: '%'
  6. });
  7. $('elemento-7').addEvent('click', function()
  8. {
  9. 	miEfecto7.start(0, 81);
  10. });
Click!
wait 
  1. var miEfecto8 = new Fx.Style('elemento-8', 'margin-left', 
  2. {
  3. 	transition: Fx.Transitions.Back.easeInOut,
  4. 	duration: 1500,
  5. 	wait: false	
  6. });
  7. $('elemento-8').addEvent('click', function()
  8. {
  9. 	miEfecto8.start(0, 383);
  10. });
Click!
fps 
  1. var miEfecto9 = new Fx.Style('elemento-9', 'margin-left', 
  2. {
  3. 	transition: Fx.Transitions.Back.easeInOut,
  4. 	duration: 1500,
  5. 	fps: 5
  6. });
  7. $('elemento-9').addEvent('click', function()
  8. {
  9. 	miEfecto9.start(0, 383);
  10. });
Click!
onStart 
  1. var miEfecto10 = new Fx.Style('elemento-10', 'margin-left', 
  2. {
  3. 	transition: Fx.Transitions.Back.easeInOut,
  4. 	duration: 1500,
  5. 	onStart: function()
  6. 	{
  7. 		alert('Comienza nuestro Efecto!');
  8. 	}
  9. });
  10. $('elemento-10').addEvent('click', function()
  11. {
  12. 	miEfecto10.start(0, 383);
  13. });
Click!
onComplete 
  1. var miEfecto11 = new Fx.Style('elemento-11', 'margin-left', 
  2. {
  3. 	transition: Fx.Transitions.Back.easeInOut,
  4. 	duration: 1500,
  5. 	onComplete: function()
  6. 	{
  7. 		alert('Termino nuestro Efecto!');
  8. 	}
  9. });
  10. $('elemento-11').addEvent('click', function()
  11. {
  12. 	miEfecto11.start(0, 383);
  13. });
Click!
onCancel 
  1. var miEfecto12 = new Fx.Style('elemento-12', 'margin-left', 
  2. {
  3. 	transition: Fx.Transitions.Back.easeInOut,
  4. 	duration: 1500,
  5. 	onCancel: function()
  6. 	{
  7. 		alert('Se cancelo nuestro Efecto!');
  8. 	}
  9. });
  10. $('elemento-12').addEvent('click', function()
  11. {
  12. 	miEfecto12.start(0, 383);
  13. 	miEfecto12.stop();
  14. });
Click!