jquery - 50%/50% divs，点击 100% 动画

Question

我在做什么:

我正在开发一个有 2 个不同“侧面”的网站，当您单击左侧时，左侧需要为 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

我做了一些小工作。我已经编辑了你的 fiddle ，请检查。

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

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

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