jquery - animate({top}) 在完成时水平捕捉

Question

我需要一些帮助，我会很感激任何建议。考虑一个 position:relative div，在它里面有三个 position:absolute 类 page 的 div。重点是用类似于 jQ 中倒置的 slideUp-slideDown 的转换打开页面。

问题是:过渡水平对齐，这是不好的。还有 #mainContainer 如何垂直居中？

您可以在 http://jsfiddle.net/4zaWz/ 中看到该问题的演示

代码如下:

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

当 jQuery 中的元素设置动画时，它们设置为 position:absolute。因此，在这种情况下，它破坏了您的动画，因为它破坏了您将页面从绝对页面更改为相对页面的 CSS。如果你只是删除 .active-page 上的亲戚，你会没事的。您需要想出一种方法来保持“事件”状态，并且让普通页面保持相同的“位置”。我会继续玩它。

现在，以绝对位置居中的东西很简单:

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

(取窗口和元素的宽度，将它们除以 2[half] 然后减去它们)