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="outer"><div class="explode top left">Explodes!</div><div class="explode top right">Explodes!</div><div class="explode bottom left">Explodes!</div><div class="explode bottom right">Explodes!</div></div>
<button id="normal">explode</button>
<button id="fixed">fixed</button>

CSS

#outer {
    width: 400px;
}
div.explode {
    width: 100px;
    height: 100px;
    display: inline-block;
    background: #abcdef;
    margin: 10px;
    border: 1px solid #000;
    padding: 10px;
}

#outer div.top {
    margin-top: 40px;
}
#outer div.left {
    margin-left: 40px;
}
#outer div.bottom {
    margin-bottom: 40px;
}
#outer div.right {
    margin-right: 40px;
}

JavaScript

$("#normal").click(function() {
    $(".explode").toggle("explode", 2500);
});
$("#fixed").click(function() {
    fixexplode.call($(".explode"), {
        duration: 2500,
        effect: "explode",
        mode: "toggle"
    });
});


var fixexplode = function(o) {

    return this.queue(function() {
        var rows = o.pieces ? Math.round(Math.sqrt(o.pieces)) : 3,
            cells = rows,
            el = $(this),
            mode = $.effects.setMode(el, o.mode || 'hide');
            offset = el.show().css('visibility', 'hidden').offset(),
            // use "even" numbers for the sake of chunking - better math
            width = Math.ceil( el.outerWidth() / cells ) * cells,
            height = Math.ceil( el.outerHeight() / rows ) * rows;

        for (var i = 0; i < rows; i++) { // =
            for (var j = 0; j < cells; j++) { // ||
                el.clone().appendTo('body').wrap('<div></div>').css({
                    position: 'absolute',
                    visibility: 'visible',
                    margin: 0,
                    left: -j * (width / cells),
                    top: -i * (height / rows)
                }).parent().addClass('ui-effects-explode').css({
                    position: 'absolute',
                    overflow: 'hidden',
                    width: width / cells,
                    height: height / rows,
                    left: offset.left + j * (width / cells) + (mode == 'show' ? (j - Math.floor(cells / 2)) * (width / cells) : 0),
                    top: offset.top + i * (height / rows) + (mode == 'show' ? (i - Math.floor(rows / 2)) * (height / rows) : 0),
                    opacity: mode == 'show' ? 0 : 1
                }).animate({
                    left: offset.left + j * (width / cells) + (mode == 'show' ? 0 : (j - Math.floor(cells / 2)) * (width / cells)),
                    top: offset.top + i * (height / rows) + (mode == 'show' ? 0 : (i - Math.floor(rows / 2)) * (height / rows)),
                    opacity:...