Javascript 翻转菜单始终水平居中（打开或关闭时）

我的代码：

var currentPage=0；
$（“.book”）
.on（'单击'，'激活'，下一页）
.on（'单击'，'翻转'，上一页）；
$（'.book'）.hammer（）.on（“swipeleft”，下一页）；
$（'.book'）.hammer（）.on（“swiperight”，前页）；
函数prevPage（）{
$（“.flipped”）
.last（）
.removeClass（'翻转'）
.addClass（“活动”）
.同级（“.page”）
.removeClass（'活动'）
$（“.scene”）
.addClass（'right-set'）.css（“left”，“0px”）；
}
函数下一页（）{
$（“.active”）
.removeClass（'活动'）
.addClass（'翻转'）
.next（“.page”）
.addClass（“活动”）
.兄弟姐妹（）
$（“.scene”）
.addClass（'left-set'）.css（“left”，“490px”）；
}

.scene{
宽度：500px；
高度：500px；
保证金：自动；
-webkit透视图：2000px；
透视图：2000px；
左：0；
右：0；
排名：0；
底部：0；
}
.书{
位置：相对位置；
宽度：100%；
身高：100%；
-webkit变换样式：保留-3d；
变换样式：保留-3d；
}
.第页{
光标：指针；
位置：绝对位置；
颜色：黑色；
宽度：100%；
身高：100%；
-webkit转换：1.5s-webkit转换；
转变：1.5s转变；
-webkit变换样式：保留-3d；
变换样式：保留-3d；
-webkit变换原点：左中心；
-ms变换原点：左中心；
变换原点：左中心；
}
.前线，
.回来{
位置：绝对位置；
宽度：100%；
身高：100%；
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
-webkit背面可见性：隐藏；
背面可见性：隐藏；
}
.回来{
-webkit变换：旋转（180度）；
变换：旋转（180度）；
}
.page.active{
z指数：1；
}
.翻页{
-webkit变换：旋转（-180度）；
变换：旋转（-180度）；
}
.页.翻转：类型的最后一页{
z指数：1；
}

---

像这样更新JS函数

function prevPage() {
$('.flipped')
    .last()
    .removeClass('flipped')
    .addClass('active')
    .siblings('.page')
    .removeClass('active')
$('.scene')
    .addClass('right-set').css("left", "0px");

$('#scene').animate({
    'margin-left': '50%'
});

if ($('section.page:nth-child(1)').hasClass('active') == true) {
    $('#scene').animate({
        'left': '0px',
        'margin-left': '35%'
    });
}


}

function nextPage() {
    $('.active')
        .removeClass('active')
        .addClass('flipped')
        .next('.page')
        .addClass('active')
        .siblings()
    $('.scene')
        .addClass('left-set').css("left", "490px");

$('#scene').animate({
    'margin-left': '50%'
});

if ($('.right-set').hasClass('flipped') == true) {
    $('#scene').animate({
        'left': '0px',
        'margin-left': '65%'
    });
}

}

---

您需要重新查看代码并发布相关数据。我无法运行您在问题中添加的代码段…您也可以检查此问题