使用jquery动画页面过渡[Revisited]

Question

好的，所以我一直在查看有关页面转换的其他帖子。但我没有找到任何具体的东西我需要的东西。所以我有3个菜单项。关于，服务＆amp;接触。

我需要有3个内容div（可以有一个class =“content”），最初会被隐藏。单击任何菜单项将为内容div设置动画，并将其垂直和水平居中显示在页面上。

如果目前有任何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": {}
});

和小提琴：http://jsfiddle.net/93HjV/

Answer 2

Jqtouch可能是满足您需求的有用工具。它主要是为移动浏览器设计的，但它可以在桌面浏览器中使用，它可能很有用。 www.jqtouch.com

看一下这个例子:(向上滑动）http://www.jqtouch.com/preview/demos/main/#animations

但是，要垂直居中，你可能会写一些css代码（不确定）。