Multiple div animate with jQuery [closed]

Question

At first look at this fiddle, what I have done so far:

https://jsfiddle.net/9wsdgc6x/

<div class="row1">
    <div class="dashboard-box">
        <span class="glyphicon glyphicon-book" aria-hidden="true"></span>
        <p>Feeds</p>
    </div>
    <div class="dashboard-box">
        <span class="glyphicon glyphicon-book" aria-hidden="true"></span>
        <p>Feeds</p>
    </div>
    <div class="dashboard-box">
        <span class="glyphicon glyphicon-book" aria-hidden="true"></span>
        <p>About me</p>
    </div>
    <div class="dashboard-box">
        <span class="glyphicon glyphicon-book" aria-hidden="true"></span>
        <p>Gamestack</p>
    </div>
    <div class="dashboard-box">
        <span class="glyphicon glyphicon-book" aria-hidden="true"></span>
        <p>Favourites</p>
    </div>
</div>
<div class="row2">
    <div class="dashboard-box">
        <span class="glyphicon glyphicon-book" aria-hidden="true"></span>
        <p>Feeds</p>
    </div>
    <div class="dashboard-box">
        <span class="glyphicon glyphicon-book" aria-hidden="true"></span>
        <p>Feeds</p>
    </div>
    <div class="dashboard-box">
        <span class="glyphicon glyphicon-book" aria-hidden="true"></span>
        <p>About me</p>
    </div>
    <div class="dashboard-box">
        <span class="glyphicon glyphicon-book" aria-hidden="true"></span>
        <p>Gamestack</p>
    </div>
    <div class="dashboard-box">
        <span class="glyphicon glyphicon-book" aria-hidden="true"></span>
        <p>Favourites</p>
    </div>
</div>
<div class="row3">
    <div class="dashboard-box">
        <span class="glyphicon glyphicon-book" aria-hidden="true"></span>
        <p>Feeds</p>
    </div>
    <div class="dashboard-box">
        <span class="glyphicon glyphicon-book" aria-hidden="true"></span>
        <p>Feeds</p>
    </div>
    <div class="dashboard-box">
        <span class="glyphicon glyphicon-book" aria-hidden="true"></span>
        <p>About me</p>
    </div>
    <div class="dashboard-box">
        <span class="glyphicon glyphicon-book" aria-hidden="true"></span>
        <p>Gamestack</p>
    </div>
    <div class="dashboard-box">
        <span class="glyphicon glyphicon-book" aria-hidden="true"></span>
        <p>Favourites</p>
    </div>
</div>

css:

.dashboard-box{
    display: inline-block;
    background: rgba(255,255,255,0.1);
    vertical-align: middle;
    position: relative;
    width: 80px;
    height: 80px;
    border: 1px solid #000000;
}

js:

$(document).ready(function(){
    $(".dashboard-box").click(function() {
       $(this).siblings(".dashboard-box").animate({left: '100%'}, "slow");
    });
});

Now, what I want is when I click a div that div will enlarge and will take 60% of my window and rest of the div will animate to both sides of window in two column, one in left which will contain half of the div and one in right which will contain the rest of the div. Then by pressing esc it will be back where it was. Any help will be appreciated. Thanks in advance.

Answer 1

Is this what you're achieving?

var zoom = false;
var boxPadding = 4;
var smSize = 80;
var bigSize = $(window).width() * 60 / 100;

function clearSiblings($elem) {
    var deferred = $.Deferred();

    $elem.siblings('.dashboard-box').each(function(i){
        $(this).animate({
            top: (Math.floor(i/2) * smSize) + Math.floor(i/2) * boxPadding,
            left: i % 2 == 0 ? bigSize + boxPadding : bigSize + smSize + (2*boxPadding),
        }, 'fast', function() {
            $(this).css({position: 'absolute'});
            deferred.resolve();
        });
    });
    return deferred.promise();
}

function resetBoxes() {
    $('.myRow > div.dashboard-box').each(function(i){
        console.log(i);
        $(this).animate({
            width: smSize,
            height: smSize,
            top: 0,
            left: (i % 5 * smSize) + (i % 5 * boxPadding),
        }, 'fast', function(){
            if ( i % 5 == 0 ) {
                $(this).css({position: 'relative'});
            }
            else {
                $(this).css({position: 'absolute'});
            }
        });
    });
    zoom = false;
}

$(document).ready(function(){
    resetBoxes();

    $(".dashboard-box").click(function() {
        $this = $(this);
        if (!zoom) {
            $this.css({position: 'relative'});
            clearSiblings($this).done(function() {
                $this.animate({
                    width: bigSize, 
                    height: bigSize,
                    left: 0
                }, 'slow', function(){
                    // doe nothing?
                });
            });
            zoom = true;
        }
        else {
            resetBoxes();
        }
    });
});

$(document).keyup(function(e) {
    if (e.keyCode == 27 && zoom) {
        resetBoxes();
    }
});

Updated: FIDDLE