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 がページ スライド トランジションを使用して、項目 1 の div が右からスライドインするようにするとよいでしょう。同様に、ユーザーが をクリックするItem 2と、div が下から上にスライドします。繰り返しますが、 をクリックするHomeと、div が左からスライドインします。私が望むのは、リンクが現在のページに対して配置されているのと同じ方向からページ スライドが来ることだと思います。これは可能ですか?もしそうなら、それを実装する最良の方法は何ですか?