jQuery 슬라이딩 패널 - Divs를 나란히 배치합니다.

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

?