3

jQueryUIスライド効果を使用してページ遷移を実装しようとしています。残念ながら、移行が進行中の場合、ページの上部が切り取られます。この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);
});

ありがとう。

4

1 に答える 1

5

うわー、わかった:)

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

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

サイズを変更すると、「ブロックタイプ」のものである必要があると考えたので、インラインブロックをそれらに投げて、機能しました。ただし、2ページ目が非表示になっているため、正しくありません。だから私はそこにフロートを投げて、それはうまくいきました..私はその背後にある論理を本当に説明することはできませんが、これは間違いなく良いインタビュー「なぞなぞ」になるでしょう笑：P

ここで動作しています:) http://jsfiddle.net/lookitstony/EdsP4/

于 2012-11-08T22:35:57.133 に答える