Jquery ui jQueryUI幻灯片效果在转换时切断部分div

我正在尝试使用jQueryUI幻灯片效果实现页面转换。不幸的是，在进行转换时，页面顶部会被切掉。我使用以下JSFIDLE复制了该问题：。有人能告诉我我做错了什么吗

代码的关键领域如下所示：

HTML

JavaScript

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

谢谢。

我明白了：）

因此，随着它改变大小，我认为它必须是“块类型”的东西，所以我把内联块扔到了它们身上，它成功了。。但不正确，因为您隐藏了第2页。所以我在上面放了一个浮子，它成功了。。我真的不能解释背后的逻辑，但这绝对是一个很好的采访“谜语”lol:P

---

它在这里工作：）

哇！你真的想得很离谱。事实上，看着你的答案，我开始玩更多的游戏，发现display:inline块真的不需要。如果您只需将float:left移动到.page，则转换将开始正常工作。我仍然无法解释原因，所以我很想听到别人的解释！是的，我第一次这样做，但是在我的电脑上，这引起了很大的抖动，所以我不想考虑这个答案。虽然在你的机器上，没有我运行的所有东西，它可能像搅打黄油一样光滑：）。。。刚刚在我家的机器上测试过。。这里也很平稳。酷：）奇怪的行为。

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

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

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