jquery - 基于无序列表的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 将从左侧滑入。我想我想要的是页面幻灯片来自与链接相对于当前页面定位的方向相同的方向。这可能吗？如果可以，实现它的最佳方法是什么？