从远角设置宽度/高度的动画

Question

我有一个6块的网格.当点击每个块时,块膨胀并覆盖容纳块的容器.

第一个框(左上角)看起来不错,但是其他框架没有错觉这个块长到容器的宽度和高度,因为它从它们的左上角位置开始.

理想情况下,盒子2和5应该从它们的中心扩展,盒子1,3,4和6应该从它们的远角扩展.这可能吗？怎么样？

我创建了一个显示我的问题的JSFiddle.但是重现的代码在这里:

JQuery的

$(".service-block").on("click", "a", function (e) {
    e.preventDefault();

    var block = $(this);
    var blockOffset = block.offset();
    var blockBackgroundColor = block.css("backgroundColor");

    var container = $(".service-grid");
    var containerOffset = container.offset();

    // Create the popup and append it to the container
    var popout = $("<div class='service-block-popup'>Test</div>");
    popout.css({
        "backgroundColor": blockBackgroundColor,
        "position": "absolute",
        "top": blockOffset.top,
        "left": blockOffset.left
    }).appendTo(container)

    // Now animate the properties
    .animate({
        "height": container.height() + "px",
        "width": container.width() + "px",
        "top": containerOffset.top,
        "left": containerOffset.left
    }, 1500, function() {
        //alert("done");
    })

    .on("click", function () {
        popout.remove();
    });

});

标记

<div class="service-grid">
    <div class="row">
        <div class="service-block">
            <a href="#" class="box1">
                <span class="title">Box 1</span>
            </a>
        </div>
        <div class="service-block">
            <a href="#" class="box2">
                <span class="title">Box 2</span>
            </a>
        </div>
        <div class="service-block">
            <a href="#" class="box3">
                <span class="title">Box 3</span>
            </a>
        </div>
    </div>
    <div class="row">
        <div class="service-block">
            <a href="#" class="box4">
                <span class="title">Box 4</span>
            </a>
        </div>
        <div class="service-block">
            <a href="#" class="box5">
                <span class="title">Box 5</span>
            </a>
        </div>
        <div class="service-block">
            <a href="#" class="box6">
                <span class="title">Box 6</span>
            </a>
        </div>
    </div>
</div>

CSS

*, *::after, *::before {
    box-sizing: border-box;
}

.service-grid { width: 600px; }
.row { 
    overflow: hidden; 
}

.service-grid .service-block a {
    display: block;
    height: 200px;
    width: 200px;
    text-align: center;
    float: left;
}
.service-grid .service-block a > img {
    display: block;
    margin: 0 auto;
    transition: all 100ms linear 0s;
}
.service-grid .service-block a > .title {
    display: block;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 2.2rem;
    font-weight: bold;
    line-height: 3.2rem;
    margin-top: 20px;
    text-transform: uppercase;
}

.box1 { background: red; }
.box2 { background: purple; }
.box3 { background: yellow; }
.box4 { background: orange; }
.box5 { background: green; }
.box6 { background: magenta; }

Answer 1

我自己来回答我的问题。这是一个简单的错误！

我没有设置宽度/高度.service-block-popup。所以它并没有从目前的状态扩展。它应该是这样构建的：

// Create the popup and append it to the container
var popout = $("<div class='service-block-popup'>Test</div>");
popout.css({
    "backgroundColor": blockBackgroundColor,
    "position": "absolute",
    "top": blockOffset.top,
    "left": blockOffset.left,
    "width": block.outerWidth(),
    "height": block.outerHeight()
}).appendTo(container)
/* .... */

在这里行动： http: //jsfiddle.net/hdq0x2s8/4/