jQuery智能手机幻灯片效果

Question

我在页面上有几个div，除了一个div之外都隐藏了

<div id="main"> ... content ... </div>
<div id="p1"> ...content... </div>
<div id="p2"> ...content... </div>
<div id="p2"> ...content... </div>

<script type="text/javascript">
  $('#p1').hide();
  $('#p2').hide();
  $('#p3').hide();
</script>

现在在主页上我有（比方说）3个按钮/链接。我想创建一个类似于智能手机应用程序的滑动效果（当点击主页面上的按钮/链接时）它将主屏幕从屏幕向左滑动，并从右侧滑动相关的div（例如p1）同时放在视口上。

现在我可以这样做，可以通过替换主div的内容（滑动div的内容并将p1 div的内容滑动到div中），或者通过滑动整个div离开屏幕来完成滑动替换div）。

任何一个选项，我都不知道如何使用jQuery实现这一目标。

更新： 由于我还没有收到解决方案，而且我一直在寻找答案，我也找到并且（只是命令自己）：Building iPhone Apps with HTML, CSS, and JavaScript: Making App Store Apps Without Objective-C or Cocoa。请注意（完全披露），即联盟链接（亚马逊）。虽然我没有宣传这本书（还没有读过），但对其他人来说可能会有所帮助。

更新2：Kudos到stackoverflow，该联盟链接自动更改为其联盟代码，因此我将该书链接为他们的利益。 :)无论哪种方式，仍然希望这本书帮助某人，迫不及待地想收到我的副本。