JSFiddle - React, Tailwind, and code Playground

by Corey Frang

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/ui-lightness/jquery-ui.css">
<div id="margins"> </div>
<button id="normal"> click and animate </button>
<button id="reset"> click to reset </button>
<button id="sub"> click and animate w/ punch</button>

CSS

#margins {
    margin: 10px;
    margin-top: 40px;
    background: #abcdef;
    height: 100px;
}

JavaScript

$("#normal").click(function() {
    $("#margins").animate({
        margin: 40
    });
});

$("#reset").click(function() {
    $("#margins").css({
        margin: '',
        marginLeft: '',
        marginRight: '',
        marginTop: '',
        marginBottom: ''
    });
});

$("#sub").click(function() {
    sub("#margins").animate({
        margin: 40
    });
});

var sub = (function($) {
    var _animate = $.fn.animate,
        dirprops = ['marginLeft', 'marginRight', 'marginBottom', 'marginTop'];

    $.fn.animate = function() {
        var args = [].slice.apply(arguments),
            props = args.shift();

        if ('margin' in props) {
            $.each(dirprops, function(i, prop) {
                if (!(prop in props)) {
                    props[prop] = props.margin;
                }
            });
            delete props.margin;
        }
        args.unshift(props);
        _animate.apply(this, args);
    }
    return $;
})(jQuery.sub());