jquery - 使用 jquery 实现动画页面转换 [重访]

Question

好吧，我一直在查看有关页面转换的其他帖子。但我还没有找到任何专门满足我需要的东西。所以我得到了 3 个菜单项。关于、服务和联系方式。

我需要有 3 个内容 div(可以有一个 class="content")，它们最初将被隐藏。单击任何菜单项都会对内容 div 进行动画处理，并将其在页面 View 中垂直和水平居中。

当前是否有可见的div。单击任何菜单项都会隐藏该菜单项并为新菜单项添加动画效果。

请注意，jquery 还需要检查可见内容的高度(因为每个 div 可能包含更多或更少的文本)并将 div 水平和垂直居中，就像我猜的模态灯箱所做的那样。我希望视觉指南能够描述我的需要。我如何用 jquery 做到这一点？谢谢。

Answer 1

查看the .animate() API 。这是一个例子:

$(div).show().animate({
    "margin-top": "-16em"
}, {
    "duration": 500,
    "easing": "swing",
    "complete": function () {},
    "step": function (now, fx) {},
    "queue": false,
    "specialEasing": {}
});

还有一把 fiddle : http://jsfiddle.net/93HjV/