我正在尝试使用 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;
}
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);
});
谢谢。