I deferred objects di jQuery ci permettono di controllare totalmente il modo con cui le animazioni vengono concatenate. Il metodo pipe() associato a ciascuna istanza di un oggetto Deferred permette di eseguire il nostro codice per poi passare al blocco di codice successivo. Questo metodo esegue il nostro codice in sequenza. Il modo migliore per usare questa caratteristica di jQuery è quello di scomporre le nostre animazioni in funzioni sequenziali. Vediamo come.
Usiamo un oggetto che contiene tutte le fasi della nostra animazione suddivise in metodi:
var Chainable = {
moveLeft: function() {
$('#test').animate({
opacity: '0.1',
left: '+=400'
}, 1200);
},
moveTop: function() {
$('#test').animate({
opacity: '0.4',
top: '+=160',
height: 20,
width: 20
}, 'slow');
},
moveRight: function() {
$('#test').animate({
opacity: '1',
left: 0,
height: 100,
width: 100
}, 'slow');
},
replace: function() {
$('#test').animate({
top: 0
}, 'fast').
slideUp().
slideDown('slow');
},
expand: function() {
$('#test').animate({
width: 300,
height: 300
}, 600);
},
run: function() {
$.Deferred(function(def) {
def.pipe(function() {
Chainable.moveLeft();
}).
pipe(function() {
Chainable.moveTop();
}).
pipe(function() {
Chainable.moveRight();
}).
pipe(function() {
Chainable.replace();
}).
pipe(function() {
Chainable.expand();
});
}).resolve();
}
};
Il metodo run() crea un oggetto Deferred ed usa varie chiamate al metodo pipe() per eseguire tutte le fasi della nostra animazione in sequenza. Il metodo resolve() finale istruisce il browser a considerare concluso il ciclo di animazioni e dereferenziare l'oggetto deferred appena creato.
Ecco come usare il precedente codice:
$(function(){
$('#run').click(function(event){
Chainable.run();
event.preventDefault();
});
});
Potete visionare l'esempio finale in questa pagina.