Creating page transitions in jQuery similar to "http://support.microsoft.com/."
Encountering an issue where after the page transitions are completed, they start from the left instead of the expected right direction. Referencing this fiddle (Working Code) will provide a clearer understanding of the problem. Clicking on "Page 1" from the dropdown menu initiates the transition where the first div slides from right to left (←) smoothly. Subsequently, clicking on the text within the first div reveals the second div sliding in from right to left (←) as well, which is functioning correctly. However, upon clicking the text within the second div and transitioning to the third div, the first and second divs hide to the left while the third div slides in from right to left (←), causing a problem. When clicking back on "page 1" from navigation, the hidden divs reappear from left to right (→) rather than right to left (←). What steps can be taken to resolve this issue?
Code Provided Below
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");
});
});