blocks

stackOverflow question

by selbh

HTML

<div class="block">
    <h2>I'm block 1</h2>
</div>

<div class="block">
    <h2>I'm block 2</h2>
</div>

<div class="block">
    <h2>I'm block 3</h2>
</div>

<div class="block">
    <h2>I'm block 4</h2>
</div>

CSS

.block {
    width: 200px;
    height: 100px;
    float: left;
    margin: 20px;
    text-align: center;
    line-height: 100px;
    cursor: pointer;
}
.block:nth-child(1) {
    background: green;
}
.block:nth-child(2) {
    background: red;
}
.block:nth-child(3) {
    background: orange;
}
.block:nth-child(4) {
    background: pink;
}

JavaScript

$(document).ready(function() {

    $(".block").click(function() {
        var $this = $(this);
        var pos = $this.offset();
        var $siblings = $(this).siblings().add(this);
        var marginTop = $this.css('marginTop').replace(/[^-\d\.]/g, '');
        var marginLeft = $this.css('marginLeft').replace(/[^-\d\.]/g, ''); 
        
        var $clone = $this.clone();

        $siblings.slideToggle("slow");
        
        $clone.css({
            position: 'absolute',
            left: pos.left - marginLeft,
            top: pos.top - marginTop,
            'background-color': $this.css('background-color')
        });
        
        $('body').append($clone);
        
        $this.css('opacity', 0);
        
        $clone.animate({
            'left': 0,
            'top': 0
        });
        
        
        $clone.click(function() {
            $siblings.slideToggle("slow", function() {
                $clone.remove();
                $this.css('opacity', 1);
            });
            
            $clone.animate({
                left: pos.left - marginLeft,
                top: pos.top - marginTop
            });
        });
        

    });

});