Il metodo data() di jQuery consente di associare qualsiasi tipo di dati ad un elemento. Possiamo sfruttare questa caratteristica per associare un oggetto ad un elemento. Tale oggetto avrà un metodo che creerà un'animazione ripetuta. Vediamo come fare.
Il codice jQuery è il seguente:
$(function() {
$('#test').data('animation', {
animate: function() {
var interval = setTimeout(function() {
$('#test').animate({
width: '+=20px',
height: '+=20px'
}, 500, function() {
$(this).animate({
width: 100,
height: 100
}, 500);
});
setTimeout(arguments.callee, 1000);
}, 25);
}
});
$('#test').data('animation').animate();
});
Come si può notare l'oggetto associato ha un nome (animation) e un metodo (animate()). Per poterlo utilizzare occorre accedere prima all'oggetto e quindi invocare il metodo come in qualsiasi altro oggetto JavaScript:
$('#test').data('animation').animate();
Il vantaggio maggiore di questo approccio è il notevole aumento della performance dei nostri script, in quanto l'oggetto associato all'elemento viene prima registrato e quindi usato.
Potete visionare l'esempio finale in questa pagina.