Question

对于我为自己和朋友制作的网站，我有一个div容器/包装器，其中包含2个其他div：一个占据左半部分，背景为黑色，另一个占据右侧，背景为白色。从本质上讲，这让我得到一个分裂的彩色背景。每个div都有一半的徽标。这是暂时托管的页面，以便您可以看到它。

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

无论如何，我希望在页面的左侧和右侧有链接，点击这些链接会使其各自的div从50％扩展到100％。我有一些想法，但我不确定如何去做这个（我对javascript很新）。第一种方法是将扩展div的z-index设置为高于非扩展的z-index，然后扩展（以某种方式），另一种是将扩展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在评论中留下的问题：

有一种方法可以在动画完成后重定向页面吗？

是的，只需添加第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

<小时/> 已编辑以回复错误报告（在评论中）：

另一个错误（简单修复）是，无论何时单击其中一个div，它都会创建一个新按钮。所以说你点击左半边，它展开并填充页面等，然后你再次点击它（它现在在页面的任何地方）。它会尝试添加第二个按钮。

要防止第二个按钮添加到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.
        }
    });

只要button选择器返回否匹配，只会附加div，或者确实为$('.show')设置动画。

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

Answer 2

如果你给div的绝对位置，那么 - 1st位于左上角，而另一个位于右上角。然后在单击事件中，您可以更改要扩展的div的另一个顶角的位置。

您可以使用jquery轻松完成此操作。检查jquery documentation以设置css。

Answer 3

看起来你已经包含了jQuery，所以请使用它！它是最简单的库，用于完成简单的动画。

这是一个示例点击功能，可以将右侧背景滑动为100％，就像您说的那样：

$('a#link').click(function(e) {
  e.preventDefault();
  $('#left-bg').animate({ width : '0%' }, 'slow');
  $('#right-bg').animate({ width : '100%' }, 'slow');
});

显然，在另一个方向上，你可以在传递给动画函数的对象中切换宽度值。

如果您不熟悉animate函数，请查看文档，但基本上您只需将key：value对象中的CSS规则传递给它，并且它会随着时间的推移更改CSS值 - 为其设置动画！

希望这有帮助！

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

3 个答案: