0

JQuery を使用して非常に基本的なアニメーションを作成しています。基本的に私が持っているのは、幅 60%、高さ 80% のサイズの DIV で、マニュアルが含まれています。私の目標は、マニュアルのページをめくるとき、現在のページが上に移動して消え、次のページが下から現れることです。

私は十分に近づいていますが、何かが間違っていて、それを修正する方法がわかりません - ページ DIV がコンテナーの外側に表示されています。トップ プロパティは 110% に設定されていますが、有効になっていないことがわかります。それらの位置は、その上にあるメニュー テーブルによってのみ影響を受けます。

だから私の問題は、本当にです-どのようにDIVをコンテナの外側に見えないようにしますが、DIV全体の可視性や表示を変更せずに、上に移動するとテキストが表示されますが、コンテナ上にあるテキストとその外にはありません。

    .manualPage {
    color:rgba(241, 241, 241,1.0);
    top:110%;
    text-align:left;
    left:0%;
    cursor:default;
    z-index:30;
    font-family: "Open Sans", sans-serif;
    font-size:11pt;
    width:100%;
    height:100%;
}

.BigWindow {
    position:absolute;
    width:60%;
    height:80%;
    top:10%;
    display:inline-block;

    left:-70%;

    background-repeat:repeat;

    color:rgba(241, 241, 241,1.0);

    font-family: "Open Sans", sans-serif;
    font-size:12pt;

    text-align:center;

    cursor:default;

    z-index:30;
}

BigWindow がコンテナで、manualPage がページであることに注意してください。

関数は次のとおりですが、最初に解決する必要があるのは CSS の問題だと思います。

var currentPage = -1;

function setManualPage(num) {
    if ($('#manualMenu').css('display') != 'none')
        $('#manualMenu').fadeOut(750);
    if (currentPage != -1) {
        $('#page' + currentPage).animate({ top: '-100%' }, screen.availHeight / 2, function () { $('#page' + currentPage).css('top', '110%'); });
    }

    if (num != -1)
        $('#page' + num).animate({ top: '0%' }, screen.availHeight / 2);
    currentPage = num;
}
4

2 に答える 2

8

基本的にこれはCSSを追加することによって行われます

overflow: hidden;

囲んでいるコンテナーに移動しますが、ここのコードを見ないと、ヘルプを取得するのは困難です。

于 2013-06-08T12:33:03.543 に答える
3

試す

 .manualPage{opacity:0}

また

.manualPAge{visibility:hidden}

#page1このように、クラス manualPAge を持つすべての年齢 (#page2など) は表示されません。

アニメーション中、topプロパティを設定するときに、opacityを1ORvisibilityに設定します。visible

それを行う別の方法overflowは、含まれているウィンドウのプロパティを設定することです。

          .BigWindow{overflow:hidden}

の高さを超えるコンテンツは.BigWindow表示されません。

于 2013-06-08T12:40:14.607 に答える