Question

首先看看这个小提琴，到目前为止我做了什么：

<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将放大div并占据我窗口的60％时div的其余部分将在两列中激活窗口的两侧，其中一列将包含一半div和右边的一个将包含div的其余部分。然后按esc它会回到原来的位置。任何帮助将不胜感激。提前谢谢。

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

使用jQuery进行多个div动画

1 个答案: