jQuery: binding animation data to elements with JSON

by lovromar

HTML

<div id="test" data-anim='{"width":500,"height":500,"top":100}'></div>

CSS

#test {
    margin: 2em auto;
    position: relative;
    width: 100px;
    height: 100px;
    cursor: pointer;
    background: #c00;
    border-radius: 50%;
}

JavaScript

$('#test').click(function() {
    var data = $(this).attr('data-anim');
    var anims = $.parseJSON(data);
    $(this).animate(anims, 1000);
});