jquery - 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: このトピックで何か間違ったことを投稿/実行した場合; すみません、これが私の最初の質問です。