使用jquery实现动态页面过渡[Revisited]

Question

所以我有3个菜单项。关于、服务和联系方式。

​

​

我需要有3个内容div(可以有一个class=“内容”)，这将最初是隐藏的。单击任何菜单项都将使内容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代码(不确定)。