Question

我正在尝试设置一个页面，当用户点击3个div中的一个字母时，该div调整大小并“覆盖”屏幕上的其他两个div - 但我打了一个砖墙jquery语句 - 我知道它涉及resize函数（可能还有css函数），但我无法弄清楚我的生活究竟是怎么做的。

HTML / CSS

<div class="container">
    <div id="home" class="group">   <span class="lettering" id="A">
            A
            </span>

    </div>
    <div id="portfolio" class="group" style="margin-left: -4px;">   <span class="lettering" id="P">
            P
            </span>

    </div>
    <div id="contact" class="group" style="margin-left: -4px;"> <span class="lettering" id="C">
            C
            </span>

    </div>
</div>

html, body {
    font-size: 1em;
    background: #fff;
    height: 100%;
}
.container {
    width: 100%;
    height: 100%;
}
#home {
    background-color: #4D90FE;
}
.group {
    height: 100%;
    text-align: center;
    position: relative;
    display: inline-block;
}
#portfolio {
    background-color: #DD4B39;
}
#contact {
    background-color: #777777;
}
.lettering {
    color: #fff;
    font: bolder 7em'Bitter Bold';
    vertical-align: middle;
    position: relative;
}

的jQuery

jQuery(document).ready(function () {
    /*------------------------
    Set Divs to 1/3 Width of Screen
    ------------------------*/
    $(".group").css("width", ($(window).width() * 1 / 3));
    $(window).resize(function () {
        $(".group").css('height', $(window).height());
        $(".group").css("width", ($(window).width() * 1 / 3));
    });
    /*------------------------
    Vertically Center Div
    ------------------------*/
    $('.lettering').css("top", ($('.group').height() - $('.lettering').height()) / 2);
    /*-----------------------
    Expand Div on Element Click
    -----------------------*/
    $('.lettering').click(function () {
        $(this).parent().resize(function () {
            /* ??? */
        });
    });
});

http://jsfiddle.net/qg8Zd/

Answer 1

将所有div置于绝对位置，并更改已单击的div的div：

jQuery(document).ready(function () {
    $(".group").each(function(index, element)
    {
        var len = $(".group").length;
        //console.log((100 / len * index) + "%");
        $(element).css("left", (100 / len * index) + "%");
    });

    $('.lettering').click(function ()
    {
        $(this).parent().animate({ width: "100%", left: 0 }, 500).css("z-index", 1);
    });
});

Fiddle

Resize不是您的想法，它是在用户更改窗口元素大小时触发的事件。

/编辑以适应变化 /再次编辑动画

使用jQuery调整父div的大小

1 个答案: