Animarediv

Animate the divs inside the parent

by ian_smithz

HTML

<div class="section second" id="second">
   <div class="square" id="square_1">
       <label>1</label>
   </div>
   <div class="square" id="square_2">
       <label>2</label>
   </div>
                <div class="square" id="square_3">
                    <label>3</label>
                </div>
                <br />
                <div class="square" id="square_4">
                    <label>4</label>
                </div>
                <div class="square" id="square_5">
                    <label>5</label>
                </div>
                <div class="square" id="square_6">
                    <label>6</label>
                </div>
                <br />
            </div>

CSS

#second {
    margin: 0;
    width: 300px;
    height: 100px;
}

.square {
    width: 90px;
    height: 40px;
    float: left;
    background-color: #FFCCFF;
    margin: 5px;
}

JavaScript

$('.square').click(function (event) {
        event.preventDefault();
    
        // Get square ID
        var currentId =     $(this).attr('id'),
            extraimg =      $('#' + currentId).clone(),
            parent =        $('#second'),
            parentOffset =  parent.offset();

        extraimg
            .appendTo(parent)
            .css({
                'position': 'absolute',
                'top': (parentOffset.top + (parent.height()/2)),
                'left': (parentOffset.left + (parent.width()/2)),
                'height': 0,
                'width': 0,
                'margin': '0'
            })

            //make bigger
            .animate({
                'height': parent.height(),
                'width': parent.width(),
                'top': parentOffset.top,
                'left': parentOffset.left
            }, 1500)

            .on('click', function () {
                $(this).stop(true).remove();
            });
    });