jQuery Sliding Panels - Positionierung von Divs nebeneinander.

Question

Ich habe einen Anwendungsassistenten, der Paneele schieben soll, um die anderen Abschnitte der Lebenslaufanwendung anzuzeigen. Dies ist meine Website: http://atomicflowtech.com/portfolio/fmsresume/ Wenn Sie irgendwo auf dem Formular KLICKEN, können Sie den Effekt sehen, den ich versuche zu erreichen, aber Panels sind untereinander und dann schieben sie nach oben. Irgendein Hinweis, wie man das repariert? Es tut mir leid, wenn die Frage schlecht formuliert ist, ich konnte einfach nicht herausfinden, wie ich es besser erklären kann und das Beispiel spricht für sich selbst, denke ich. Danke für Ihre Hilfe!

Ich versuche, diesen Effekt zu erzielen: http://jsfiddle.net/jtbowden/ykbgT/2/

Answer 1

scheint, als müssten Sie nur diesen Container links schweben. sollte den Trick machen. lassen Sie mich wissen, wie es geht

Answer 2

Was mit dem Link falsch ist?

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

Sie müssen nur den Inhalt ändern, ist es nicht?