アニメーション（{top}）は完了時に水平にスナップします

私はいくつかの助けが必要です、私は助言を感謝いたします。 position:relativediv、その内部にposition:absolute divs、pageの3つがあります。ポイントは、jQの逆のslideUp- slideDownに似たトランジションでページを開くことです。アニメーション（{top}）は完了時に水平にスナップします

問題は次のとおりです。トランジションが水平にスナップします。これはうまくありません。また、#mainContainerはどのように垂直にセンタリングできますか？

function setMenu(menuItem) { 
    var $activePage = $('.active-page'); 

    if ($activePage.length > 0) { 
     $activePage.animate({ top: 584 }, 500, function() { 
      $activePage.removeClass('active-page'); 
     }); 
    } 

    var $menuCur = $("#" + menuItem); 
    $menuCur.animate({ top: 0 }, 500, function() { 
     $menuCur.addClass('active-page'); 
    }); 
}

#mainContainer 
{ 
    position: relative; 
    height: 565px; 
    width: 990px; 
    margin: auto; 
    background: url(../img/logo.jpg) no-repeat 50% 50px; 
    overflow:hidden; 
} 

.page 
{ 
    position: absolute; 
    margin-left: auto; 
    margin-right: auto; 
    left: 4px; 
    height: 584px; 
    width: 864px; 
    top:584px; 
    background: url(../img/pageBg.png) no-repeat 0 0; 
} 

.active-page 

{ 
    top:0px; 
    position: relative; 
    z-index: 30; 
}

出典

2011-01-31 Eric Fortis

jQueryの中のアイテムは、彼らが位置に設定アニメーション：

あなたがここにhttp://jsfiddle.net/4zaWz/

に問題のデモを見ることができますが、コードで絶対。したがって、この場合は、ページFROM絶対的な相対値を変更している場所でCSSを分割するため、アニメーションが壊れます。 .active-pageでrelativeを削除するだけなら、うまくいくでしょう。あなたは "アクティブ"と通常のページだけを同じ "位置"に保つ方法を見つけ出す必要があります。私はそれと一緒に遊ぶつもりです。

http://jsbin.com/emaku6/5/

（それらを減算した後、2 [半]でそれらを分割し、ウィンドウの幅と要素を取る）

出典

2011-01-31 20:41:01

また、アクティブなページで "z-index"を削除するか、通常のページで設定してください。CSS –

センタリングの問題を解決するために私の答えを更新しました。 –

ありがとう –