JSON è un formato JavaScript per la descrizione dei dati. Ma JSON, in realtà, è in JavaScript il formato degli oggetti letterali. Le uniche differenze sono a livello formale e non grammaticale. jQuery dispone di un metodo di utility $.parseJSON(). La differenza con il metodo nativo implementato nei browser moderni è che questo metodo funziona anche con i browser obsoleti. Possiamo usare il formato JSON e il metodo implementato da jQuery per collegare i dati delle animazioni (proprietà e valori CSS) agli elementi della pagina. Vediamo come.
Possiamo utilizzare gli attributi data- di HTML5 per specificare i dati delle animazioni direttamente sugli elementi interessati:
<div id="test" data-anim='{"width":500,"height":500,"top":100}'></div>
Come si può notare, la stringa contenuta nell'attributo data-anim è una stringa JSON. In JSON i nomi delle proprietà vanno sempre racchiusi tra doppie virgolette, mentre le doppie virgolette sono obbligatorie solo per i valori di tipo stringa. Ecco perchè l'attributo utilizza virgolette semplici (apici) per delimitare il suo contenuto: per evitare problemi di validazione HTML.
$.parseJSON() trasforma una stringa JSON in un oggetto JSON. Tale oggetto può quindi essere passato come primo parametro al metodo animate():
$('#test').click(function() {
var data = $(this).attr('data-anim');
var anims = $.parseJSON(data);
$(this).animate(anims, 1000);
});
I vantaggi di questo approccio sono minimi quando dovete gestire poche animazioni, ma diventano considerevoli quando dovete animare decine di elementi per pagina. A livello di back-end potete ad esempio gestire questi attributi custom in modo automatico, e con jQuery si tratta solo di selezionarli nel DOM insieme con gli elementi a loro associati.
Potete visionare l'esempio finale in questa pagina.