jQuery UI 슬라이드 효과는 전환하는 동안 div의 일부를 자릅니다.

Question

jQuery UI 슬라이드 효과를 사용하여 페이지 전환을 구현하려고합니다. 불행히도 전환이 진행될 때 페이지는 상단에서 잘게 잘립니다. 이 jsfiddle : http://jsfiddle.net/nareshbhatia/CfdEg/1/을 사용하여 문제를 재현했습니다. 누군가 내가 뭘 잘못하고 있는지 알려주실 수 있습니까? 아래에 나열된 코드의

주요 분야 :

HTML

<div id="wrapper"> 
    <div id="page1" class="page"> 
     <p>Page 1</p> 
    </div> 
    <div id="page2" class="page nodisplay"> 
     <p>Page 2</p> 
    </div> 
</div> 

CSS

body { 
    font: normal normal 16px Arial; 
} 

p { 
    font-size: 40px; 
    margin: 100px 0 0 0; 
} 

.nodisplay { 
    display: none; 
} 

#wrapper { 
    position: relative; 
    width: 480px; 
    height: 240px; 
} 

.page { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    text-align: center; 
} 

#page1 { 
    background-color: #003366; 
    color: #FFFFFF; 
} 

#page2 { 
    background-color: #F6BC0C; 
    color: #000000; 
} 

자바 스크립트

function transitionPage() { 
    // Hide to left/show from left 
    $("#page1").toggle("slide", {direction: "left"}, 500); 

    // Show from right/hide to right 
    $("#page2").toggle("slide", {direction: "right"}, 500); 
} 

$(document).ready(function() { 
    $('#page1').click(transitionPage); 
    $('#page2').click(transitionPage); 
}); 

감사합니다.

Answer 1

우트 나는 내가 그들에 인라인 블록을 던져 버리고는했다, 그래서는 "블록 타입"뭔가해야했다 생각 크기를 변경 그것을 : 그것 그래서

#page1 { 
    background-color: #003366; 
    color: #FFFFFF; 
    display: inline-block; 
} 

#page2 { 
    background-color: #F6BC0C; 
    color: #000000; 
    float:left; 
}​ 

있어 .. 하지만 페이지 2가 숨겨져 있기 때문에 잘못되었습니다. 그래서 내가 거기에 float를 던져 버리고는 ... 정말 그 뒤에 논리를 설명 할 수 있지만 확실히 "수수께끼"롤 좋은 인터뷰 것 일 : 그것은 작동하고 여기

P : http://jsfiddle.net/lookitstony/EdsP4/