완성시 수평으로 움직이기 ({위})

Question

약간의 도움이 필요하므로 언제든지 알려 주시면 감사하겠습니다. position:relativediv, 그 안에 position:absolute divs 3 개 page 인 div를 고려하십시오. 요점은 jQ의 거꾸로 된 slideUp- slideDown과 유사한 전환으로 페이지를 여는 것입니다.

문제는 다음과 같습니다. 전환이 가로로 스냅되어 좋지 않습니다. 또한 #mainContainer을 어떻게 수직으로 가운데 놓을 수 있습니까? jQuery를 항목 애니메이션 때 그들이 위치로 설정

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

Answer 1

:

당신은 여기 http://jsfiddle.net/4zaWz/

에서 문제의 데모를 볼 수있는 코드입니다 절대 . 따라서,이 경우에는 절대적으로 상대적인 페이지에서 FROM 페이지를 변경하는 CSS가 손상되므로 애니메이션이 중단됩니다. .active-page에서 친척 만 삭제하면 괜찮을 것입니다. "활성"상태를 유지하고 일반 페이지 만 동일한 "위치"를 유지하는 방법을 찾아야합니다. 나는 그걸로 계속 놀거야.

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

는

Answer 2

([반이어서이를 빼기 창과 요소의 폭을 (2)에 의해 그 분할)

이제 단순히의 절대 위치와 어떤 중심을 여기에 바이올린 ...

http://jsfiddle.net/GDFBt/

오스카 언급 한 바와 같이, 문제 w입니다 2 개의 충돌이 있습니다. position 님 - 나는 .active-page absolute를 만들었고 left 속성을 페이지 중앙에 맞추기로 변경했습니다.