使用jQuery实现多个div动画效果

Question

首先看一下这个代码片段，目前我所做的是:

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");
    });
});

现在，我想要的是当我点击一个 div 元素时，该元素会放大并占据窗口的 60%，其余部分将分别在两列中动画移动到窗口两侧，左边一列将包含该 div 元素的一半，右边一列将包含该元素的另一半。然后按下 esc 键就可以回到原来的状态。非常感谢您的帮助。

- Md Tanveruzzaman

---

请在问题中发布所有相关的代码。 - Roope

@Roope 现在看这个..jsfiddle链接将展示我到目前为止所做的。 - Md Tanveruzzaman

Answer 1

这是您所实现的吗？

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();
    }
});

更新时间：FIDDLE

- choz

---

感谢@choz的贡献...但我想让其他div动画在我的窗口两侧以两列形式呈现。 - Md Tanveruzzaman

@MdTanveruzzaman 不好意思，我没有看到那部分...那你一开始为什么会把 left: 100% 放进去呢？等一下我会再试一次，如果你解决了，请告诉我。 - choz

我忘了告诉你，我很久以前更新了我的答案和代码。 :) - choz