javascript - Div 宽度在点击时展开/缩小

Question

对于我为自己和 friend 制作的网站，我有一个 div 容器/包装器，其中包含另外 2 个 div:一个占据左半部分，背景为黑色，另一个占据右侧，背景为白色.本质上，这让我得到了一个分离的彩色背景。每个 div 包含一半的 Logo 。这是临时托管的页面，所以你们可以看到它。

http://djsbydesign.com/tempsite/index.htm

无论如何，我希望在页面的左侧和右侧有链接，单击这些链接会使它们各自的 div 从 50% 扩展到 100%。我有一些想法，但我不太确定如何去做(我对 javascript 很陌生)。第一种是将扩展的 div 的 z-index 设置为高于非扩展的 div，然后让它扩展(以某种方式)，另一种是将扩展的 div 扩展到 100%，而另一个缩小到0% 等比例。

最重要的是，我不知道该怎么做。郑重声明，我不介意使用 mootools 或 jQuery。

Answer 1

以下似乎有效:

$('#left-bg, #right-bg').click(
    function(){
        $(this).animate({'width': '100%'},600).siblings().animate({'width':'0'},600);
    });

尽管我不确定您打算如何恢复“其他”div。

JS Fiddle demo .

---

编辑以添加一个按钮(通过 jQuery)，允许将两个 div 恢复为原始尺寸:

$('#left-bg, #right-bg').click(
    function(){
        $(this).animate({'width': '100%'},600).siblings().animate({'width':'0'},600);
        $('<button class="show">Show all</button>')
            .appendTo('#wrapper');
    });

$('.show').live('click',
                function(){
                    $('#left-bg').animate(
                        {
                            'width': '50%'
                        },600);
                    $('#right-bg').animate(
                        {
                            'width': '50%'
                        },600);
                    $(this).remove();
                });

Updated JS Fiddle .

---

已编辑以解决 OP 在评论中留下的问题:

is there a way to have a page redirect after the animation completes?

是的，只需添加行 window.location.href = "http://path.to.url.com/";

$('#left-bg, #right-bg').click(
    function(){
        $(this).animate({'width': '100%'},600).siblings().animate({'width':'0'},600);
        $('<button class="show">Show all</button>')
            .appendTo('#wrapper');
        window.location.href = "http://www.google.com/" // <-- this line redirects.
    });

$('.show').live('click',
                function(){
                    $('#left-bg').animate(
                        {
                            'width': '50%'
                        },600);
                    $('#right-bg').animate(
                        {
                            'width': '50%'
                        },600);
                    $(this).remove();
                });

Updated JS Fiddle .

---

编辑以响应错误报告(在评论中):

The one other bug (easy fix) is that any time you click on either of the divs, it creates a new button. So say you clicked on the left half, and it expanded and filled the page, etc., and then you clicked on it again (it being anywhere on the page now). It would attempt to add a second button.

要防止将第二个按钮添加到 div，只需添加一个 if:

$('#left-bg, #right-bg').click(
    function(){
        if (!$('.show').length) {
            $(this).animate({'width': '100%'},600).siblings().animate({'width':'0'},600);
            $('<button class="show">Show all</button>')
                .appendTo('#wrapper');
            window.location.href = "http://www.google.com/" // <-- this line redirects.
        }
    });

只要$('.show')，它只会附加一个按钮，或者确实为div设置动画选择器返回没有匹配项。

但是，如果您还通过单击按钮重定向到另一个页面，那么这应该不是问题，因为原始页面上的任何 jQuery 都不会执行/能够访问用户被重定向到的页面(除非它是您自己域中的页面，并且您已明确选择添加相同的按钮)。