Question

我需要一些帮助，我会感激任何建议。考虑一个position:relative div，其中包含三个position:absolute个div，其中包含类page。重点是打开页面，其转换类似于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中的项目设置动画时，它们设置为一个位置：绝对。因此，在这种情况下，它会破坏您的动画，因为它会破坏您将CSS页面从FROM绝对更改为相对的CSS。如果你只是删除.active页面上的亲戚，你会没事的。您需要找出一种方法来保持“活动”，而只需要将正常页面设置为相同的“位置”。我会继续玩它。

现在，要以绝对位置为中心，只需：

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

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

Answer 2

这是一个小提琴......

http://jsfiddle.net/GDFBt/

正如奥斯卡提到的，问题是2个冲突的position - 我使.active页面绝对，并将left属性更改为页面居中。

animate（{top}）在完成时水平捕捉

2 个答案: