moofx + jquery api

HTML

<script src="https://raw.github.com/kamicane/moofx/master/moofx-min.js"></script>
<script src="https://raw.github.com/gist/2238266/f613bf6299d88e42d361436994d08cd86bdc7797/moofx-jquery.js"></script>
<div id="box">xxxxx</div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>

CSS

#box, #box2, #box3, #box4 {
    width: 16em;
    height: 16em;
    background: black;
    float: left
}

JavaScript

var sw = 1;

var boxes = $("#box, #box2, #box3, #box4")

boxes.style("box-shadow", "0 0 0 white")

boxes.on("click", function() {
    if (sw == 1) {
        boxes.animate({
            "margin": "1em 10px 2%",
            "opacity": 0,
            "box-shadow": "20px 20px 20px green",
            "border-radius": "8em",
            "background-color": "blue"
        }, "2s")
        sw = 0
    } else {
        boxes.animate({
            "margin": "0",
            "opacity": 1,
            "box-shadow": "0 0 0 white",
            "border-radius": "0",
            "background-color": "black"
        }, "2s")
        sw = 1
    }
})