Jquery Div 幻灯片从右到左切换无法正常工作

我在jquery中创建了一个页面过渡，就像"http://support.microsoft.com/"一样。

我的问题是当页面过渡完成时，它从左边开始。请参考这个小提琴（工作代码），你可以理解发生了什么。首先，我从下拉菜单中单击"第 1 页"。第一个div从右到左（←）并且它很完美，然后在我单击第一个div的文本之后，第二个div从右到左（←），这也是完美的。之后，我单击第二个 Div 的文本，第三个 Div 从右到左 （←），Div 1 和 2 隐藏@左侧，这很好。但现在问题开始了。当我从导航中单击"第 1 页"时，我的隐藏div 从左到右 （→） 代替从右到左 （←）。我该怎么办？

这是我的代码

.HTML

    <div class="codrops-top clearfix">
        <!-- <a class="codrops-icon codrops-icon-prev" href=""><span>Previous Demo</span></a>
        <span class="right"><a class="codrops-icon codrops-icon-drop" href=""><span>Back to the Codrops Article</span></a></span> -->
    </div>
    <div class="pt-wrapper">
        <div class="pt-trigger-container">
            <div class="navigation right">
                <ul>
                    <li><img src = "menu.png" width = "25">
                        <div style = "margin-left:10px">
                            <ul>
                                <li id = "page1"><a>Page 1</a></li>
                            </ul>
                        </div>
                    </li>
                </ul>
                <div class="clear"></div>
            </div>
        </div>
    </div>
    <div id = "container1" style="left:80%;background:#98bf21;height:100%;width:200px;position:absolute;display:none">
        <ul id = "contaoneritem1">
            <li><a>Content 1</a></li>
            <li><a>Content 2</a></li>
            <li><a>Content 3</a></li>
            <li><a>Content 4</a></li>
            <li><a>Content 5</a></li>
            <li><a>Content 6</a></li>
        </ul>
    </div>

    <div id = "container2" style="left:80%;background:#98bf21;height:100%;width:200px;position:absolute;display:none">
        <ul id = "contaoneritem2">
            <li><a>Content 1.1</a></li>
            <li><a>Content 1.2</a></li>
            <li><a>Content 1.3</a></li>
            <li><a>Content 1.4</a></li>
            <li><a>Content 1.5</a></li>
            <li><a>Content 1.6</a></li>
        </ul>
    </div>

    <div id = "container3" style="left:80%;background:#98bf21;height:100%;width:600px;position:absolute;display:none">
        <ul id = "contaoneritem3">
            <li><a>Content 1.1.1</a></li>
            <li><a>Content 1.2.1</a></li>
            <li><a>Content 1.3.1</a></li>
            <li><a>Content 1.4.1</a></li>
            <li><a>Content 1.5.1</a></li>
            <li><a>Content 1.6.1</a></li>
        </ul>
    </div>

.CSS

    body{overflow:hidden}
    .navigation ul{ float:right;}
    .navigation ul li{ float:left; padding:0px 300px 0px 5px;cursor:pointer}
    .navigation ul li a{cursor:pointer}
    .navigation ul li div{ display:none;}
    .navigation ul li:hover div{ display:block; position:absolute;z-index:9999}
    .navigation ul li:hover div ul{ float:none; margin-left:-30px;}
    .navigation ul li:hover div ul li{ float:none; text-align:left; padding:0px; background:#110000; border-bottom:#dddddd solid 1px;}
    .navigation ul li:hover div ul li:hover a{ background:#fff; color:black}
    .navigation ul li:hover div ul li a{ padding:3px 5px; display:block; width:100%;color:white}

.JS

    $(document).ready(function(){
      $("#page1").click(function(){
        var div3=$("#container3");  
        div3.animate({left:'120%'},"slow");
      $("#container1").show();
        var div=$("#container1");  
        div.animate({left:'20%'},"slow");
      });
    });
    $(document).ready(function(){
      $("#contaoneritem1").click(function(){
      $("#container2").show();
        var div=$("#container2");  
        div.animate({left:'40%'},"slow");
      });
    });
    $(document).ready(function(){
      $("#contaoneritem2 li a").click(function(){
        var div=$("#container2");  
        var div1=$("#container1");  
        div.animate({left:'-100%'},"slow");
        div1.animate({left:'-100%'},"slow");
        $("#container3").show();
        var div3=$("#container3");  
        div3.animate({left:'20%'},"slow");
      });
    });