jQueryスライディングパネル - 位置付けディビジョンを並べて表示します。

Question

私はパネルをスライドさせてレジュームアプリケーションの他のセクションを表示するアプリケーションウィザードを持っています。これは私のサイトです： http://atomicflowtech.com/portfolio/fmsresume/ フォーム上のどこかをクリックすると、私が達成しようとしている効果を見ることができますが、パネルはお互いの下にあり、次にスライドします。任意の手掛かりをどのようにこれを修正するには？私は申し訳ありませんが、質問がひどくフレーズされている場合、私はちょうどそれをより良く説明する方法を見つけることができなかったと私は思います。ご協力いただきありがとうございます！

私はこの効果を達成しようとしています： http://jsfiddle.net/jtbowden/ykbgT/2/

Answer 1

あなたはそのコンテナを左に浮かせておく必要があるようです。トリックを行う必要があります。どうすればいいのか教えてください

Answer 2

リンクが悪いのか？

HTML：

<div id="container"> 
    <div id="box1" class="box">Div #1</div> 
    <div id="box2" class="box">Div #2</div> 
    <div id="box3" class="box">Div #3</div> 
    <div id="box4" class="box">Div #4</div> 
    <div id="box5" class="box">Div #5</div> 
</div> 

はCSS：

body { 
    padding: 0px;  
} 

#container { 
    position: absolute; 
    margin: 0px; 
    padding: 0px; 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
} 

.box { 
    position: absolute; 
    width: 50%; 
    height: 300px; 
    line-height: 300px; 
    font-size: 50px; 
    text-align: center; 
    border: 2px solid black; 
    left: 150%; 
    top: 100px; 
    margin-left: -25%; 
} 

#box1 { 
    background-color: green; 
    left: 50%; 
} 

#box2 { 
    background-color: yellow; 
} 

#box3 { 
    background-color: red; 
} 

#box4 { 
    background-color: orange; 
} 

#box5 { 
    background-color: blue; 
} 

JS：

$('.box').click(function() { 

    $(this).animate({ 
     left: '-50%' 
    }, 500, function() { 
     $(this).css('left', '150%'); 
     $(this).appendTo('#container'); 
    }); 

    $(this).next().animate({ 
     left: '50%' 
    }, 500); 
});​ 

あなただけの内容を変更する必要は、ないですか？