Question

我在做什么：

我正在一个有两个不同“侧面”的网站上工作，当你点击左侧时，左侧需要100％。如果单击右侧，则右侧必须为100％。

已经完成：

我做了左右两边。并用Jquery制作动画。

问题
单击左侧div时，动画正在工作（仅当我添加绝对位置时才有效），但是当我尝试为右侧创建相同的动画时;它不工作！我创建了一个jsFiddle，因此您可以看到当前代码：http://jsfiddle.net/sh3Rg/

我无法做出正确的工作。当你点击右边的div;它需要动画到100％。就像左边一样。

代码

您可以在此处查看实时预览和代码：http://jsfiddle.net/sh3Rg/

HTML：

<div id="left"></div>
<div id="right"></div>

JS：

<script>
$('#left').click(function(){
    $('#left').animate({width:'100%'}, 2500);
});
</script>
<script>
$('#right').click(function(){
    $('#right').animate({width:'100%'}, 2500);
});
</script>

CSS：

html,body {
    padding:0;
    margin:0;
    height:100%;
    min-height:100%;
    background-color: #000000;
}
p { 
    cursor: pointer;
    color: #FFF;
}
#left {
    width: 50%;
    height: 100%;
    background: #666;
    float: left;
    cursor: pointer;
    position: absolute;
}
#right {
    width: 50%;
    height: 100%;
    background: #063;
    float: right;
    cursor: pointer;    
}

希望有人可以帮助我。问候，米兰

PS：如果我在这个主题中发布/做错了什么;对不起，这是我的第一个问题。

Answer 1

我做了一个小工作。我编辑了你的小提琴请检查它。

http://jsfiddle.net/sh3Rg/4/

$('#left').animate({width:'0%'}, 2500);
$('#right').animate({width:'100%'}, 2500);

希望您的代码清楚。如有任何疑问，请随意。

Answer 2

问题是#right增长到100％，但它会在#left

下增长

您应使用#right以外的其他定位将static放在左侧容器上方。

所以神奇的是：

使用绝对定位或固定定位
点击后，将活动元素的z-index更改为大于另一个的z-index

#left, #right {
    width: 50%;
    height: 100%;
    cursor: pointer;
    position: absolute;
}
#left {
    left:0;
    background: #666;
}
#right {
    background: #063;
    right: 0;
}

脚本：

var Z = 0;
$('#left').click(function(){
    $('#left').css('z-index',Z++).animate({width:'100%'}, 2500);
});




$('#right').click(function(){
    $('#right').css('z-index',Z++).animate({width:'100%'}, 2500);
});

参见工作示例：http://jsfiddle.net/sh3Rg/19/

Answer 3

的 LIVE DEMO

HTML :(添加一个特定的类：）

<div id="left" class="toggWidth"></div> <div id="right" class="toggWidth"></div>

JQ：

$('.toggWidth').click(function(){ $(this).stop().animate({width:'100%'}, 2500) .siblings('.toggWidth').stop().animate({width:'0%'}, 2500); });

Answer 4

接受的答案是正确的。但是你为什么要做width:100%？当我点击一个div它得到100％然后我不能回到以前的状态。我用width:95%

尝试了

您可以在此处查看：http://jsfiddle.net/sh3Rg/24/

Answer 5

你的问题是左边的div在右边之前被设置为50％所以它具有优势。

它就像将左侧设置为50％并且右侧设置为100％，就像将两者都设置为50％一样

Answer 6

您可以通过定位完成所有操作，而不是使用width和height。

您示例中的遗漏位是z-index，因为一个div正在消失在另一个div之下。

这是我的working example。

HTML：

<div id="left"></div>
<div id="right"></div>

CSS：

div {
    cursor: pointer;
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 0;
}
#left {
    background: #666;
    left: 0;
    right: 50%;
}
#right {
    background: #063;
    right: 0;
    left: 50%;
}

jQuery的：

$('div').click(function () {
    $(this).css('z-index', 1);
    if (this.id === 'right') {
        $(this).animate({left: 0}, 2500);
    } else {
        $(this).animate({right: 0}, 2500);
    }
});

50％/ 50％div，点击100％动画

6 个答案: