Dopo la semplice guida ad ajax, questa volta tocca a Fx.Style, una classe del Framework mootools che permette di animare gli oggetti dom tramite css.

Fare effetti con questa tecnica è molto semplice ad esempio per fare un spostamento da destra a sinistra si procede come segue:

 1: var effectchange = new Fx.Style(‘examplex’, ‘left’, {duration:500});

 2: effectchange.start(10, 100);

Che sta a significare, prendi l’elemento con id uguale a examplex e modifica il parametro left da 10 a 100 e la transazione durera 500 ms, questo causerà uno spostamento, clicca qui per visualizzare lo spostamento

Come vedete lo spostamento è molto fluido.

Al posto di left è possibile utilizzare anche un altro attributo.

Come opzioni possono essere passate anche altre cose ecco un semplice esempio con le opzioni più utili:

   1:  var effectchange = new Fx.Style(‘examplex’, ‘left’, { 

   2:                      duration:500,

   3:                      onComplete: function(){

   4:                          alert(‘Animazione terminata’);

   5:                      },

   6:                      onStart: function(){

   7:                          alert(‘Animazione iniziata’);

   8:                      } 

   9:                 });

  10:  effectchange.start(0, 100);

Segnala presso: