moofx + mootools api

HTML

<script src="https://raw.github.com/kamicane/moofx/master/moofx-min.js"></script>
<script src="https://gist.github.com/raw/2238266/fc287444d3dc5dc8fdfa246810ce4fda51b69cf9/moofx-mootools.js"></script>
<div id="box"></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.setStyle("box-shadow", "0 0 0 white")

boxes.addEvent("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
    }
})