jquery div幻燈片轉換從右到左不能正常工作

Question

我在jquery中創建了一個頁面轉換，如「http://support.microsoft.com/」this。

我的問題是當頁面轉換完成時，它從左邊開始。請參考這個小提琴（Working Code），你可以理解發生了什麼。首先我從下拉菜單中點擊「頁面1」。第一格從右到左（←）及其完美，然後點擊第一格和第二格的文字從右到左（←），這也是完美的。之後，我點擊第二個Div和第三個Div的文本，從右到左（←），Div 1和2在左側隱藏，這很好。但現在問題開始了。當我從導航中點擊「頁面1」時，我的隱藏divs從左到右（→）代替從右到左（←）。我該怎麼做？

這裏是我的代碼

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"); 
     }); 
    }); 

Answer 1

要移動的容器1 & 2極值左邊這就是爲什麼它開始從左至右的到來，做以下修改：

$(document).ready(function(){ 
$("#page1").click(function(){ 
var div3=$("#container3"); 
div3.animate({left:'120%'},"slow"); 
var div2=$("#container2"); 
var div1=$("#container1"); 
div2.css("left", "100%"); 
div1.css("left", "80%"); 
$("#container1").show(); 
var div=$("#container1"); 
div.animate({left:'20%'},"slow"); 
}); 
}); 

Fiddle DEMO