50%/ 50%div,点击100%动画

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);

希望您清楚代码。如有任何疑问，请随时咨询。