...">
Have Geek Brain

Multiple div animations with jQuery

First look at this fiddle, which 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, when I click on the div, the div will expand and take up 60% of my window, and the rest of the div will animate both sides of the window into two columns, one on the left that will contain half of the div and one on the right that will contain the rest of the div. Then by pressing esc it will go back to where it was. Any help would be appreciated. Thanks in advance.

+3
jquery css animation


source to share


1 answer


Is this what you want?

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

+1


source to share






More articles:


All Articles