基于无序列表的Jquery div转换

Question

我的页面上有一个导航栏，如下所示：

<ul id="nav">
   <li class="current"><a href="#">Home</a></li>
   <li>
      <a href="#">Header 2</a>
      <ul>
         <li><a href="#">Item 1</a></li>
         <li><a href="#">Item 2</a></li>
      </ul>
   </li>
   <li>
      <a href="#">Header 3</a>
      <ul>
         <li><a href="#">Item 3</a></li>
         <li><a href="#">Item 4</a></li>
      </ul>
   </li>

导航栏的结尾方式如| Home | Header 2 | Header 3|

现在，当用户从家中点击Item 1时，div会很好地使用页面幻灯片转换，从右侧滑入Item 1 div。同样，如果用户随后点击Item 2，div将从底部向上滑动。再次，如果他们点击Home，div将从左侧滑入。 我想我想要的是页面幻灯片来自链接相对于当前页面定位的相同方向。 这是可能的，如果是这样，实施它的最佳方法是什么？