JSFiddle - React, Tailwind, and code Playground

by gabrieleromanato

HTML

<p><a href="#" id="anim">Go!</a></p>

<div id="test" data-animation="width:150,height:150,opacity:0.5"></div>

CSS

#anim {
    padding: 5px;
    text-decoration: none;
    background: #000;
    color: #fff;
    font-weight: bold;
    border-radius: 4px;
}

#test {
    width: 100px;
    height: 100px;
    margin: 1em;
    background: #d40;
}

JavaScript

(function($) {
    
    $.fn.getData = function(attr) {
        
      var that = this;
      var data = this.attr(attr);
 
        var styles = {};
 
       var parts = data.split(',');
 
        for(var i = 0; i < parts.length; i++) {

            var props = parts[i].split(':');
            
            styles[props[0]] = props[1];

        }


        return styles;        
        
    };
    
    
})(jQuery);


$(function() {
    
    $('#anim').click(function() {

        var target = $('#test');
        var anims = target.getData('data-animation');
        
        target.animate(anims, 1000);
        
        return false;

    });        
    
});