Queued effects

Finora abbiamo visto animazioni, anche su più proprietà, che però avvengono simultaneamente. E se invece volessi metterle in coda? Cioè farle eseguire una dopo l'altra?

JQuery supporta il chaining: posso eseguire cioè metodi a cascata

Esempio:

  $(document).ready(function() {

  $('div.label').click(function() {

    $('div.button')

      .fadeTo('slow',0.5)

      .animate({left: 650}, 'slow')

      .fadeTo('slow',1.0)

      .slideUp('slow');

  });

});

Sequenza di animazioni:

• .fadeTo('slow',0.5) - fade a metà dell'opacità
• .animate({left: 650}, 'slow') - spostamento a sinistra di 650px
• .fadeTo('slow',1.0) - riporto i bottoni alla piena opacità
• .slideUp('slow'); - faccio scomparire il bottone con uno slide

Es. Queued effects sample

NB: non si possono mettere in coda metodi d'effetto e animazione con metodi non d'animazione. Quindi se scrivessi:

$(document).ready(function() {

  $('div.label').click(function() {

    $('div.button')

      .fadeTo('slow',0.5)

      .animate({left: 650}, 'slow')

      .fadeTo('slow',1.0)

      .css('backgroundColor','#f00');

  });

});

Il background dei bottoni, pur essendo l'ultimo metodo eseguito, cambiarebbe immediatamente.

Es. Non queued effects sample

Si possono animare anche più set di elementi allo stesso tempo. Voglio fare in modo che quando clicco su un paragrafo questo scompare e appare il successivo con un effetto di animazione di tipo slide:

$(document).ready(function() {
$('p:eq(3)').css('backgroundColor', '#fcf').hide();
$('p:eq(2)').css('backgroundColor', '#cff').click(function() {
var $thisPara = $(this);
$thisPara.slideUp('slow').next().slideDown('slow');
});
});

Es. Effetti su più elementi

Dunque come si gestiscono le precedenze su metodi non d'effetto? Per mezzo delle callback:

 $(document).ready(function() {

  $('p:eq(3)')

    .css('backgroundColor', '#fcf')

    .hide();

  $('p:eq(2)')

    .css('backgroundColor', '#cff')

    .click(function() {

      var $thisPara = $(this);

      $thisPara.next().slideDown('slow',function() {

        $thisPara.slideUp('slow');

      });

    });

});

• $thisPara.next().slideDown('slow', function() { $thisPara.slideUp('slow'); }); - Il secondo parametro della funzione slideDown è un'altra funzione che viene eseguita alla fine dell'animazione.

Tale funzione è detta callback

Es. Callback sample