Le animazioni jQuery possono essere memorizzate nei nuovi custom data forniti da HTML5. Il problema è trasformare dei valori stringa in oggetti da utilizzare con il metodo animate(). Le nuove generazioni di browser (incluso IE8) implementano l'oggetto JSON e il suo metodo parse() che trasforma una stringa JSON in un oggetto. Vediamo come usare questa caratteristica.
Abbiamo questa marcatura:
<div id="test" data-animation='{"width":200,"height":200,"opacity":0.5}'></div>
Ecco come utilizzare il metodo JSON.parse():
$(function() {
var test = $('#test');
var data = test.attr('data-animation');
var styles = JSON.parse(data);
test.click(function() {
test.animate(styles, 1000);
});
});
Per funzionare il metodo ha bisogno che la stringa rispetti le regole sintattiche e formali di JSON, altrimenti restituisce un errore. Potete visionare l'esempio finale in questa pagina.