Question

我在jquery中创建了一个页面过渡，如“http://support.microsoft.com/”这个。

我的问题是当页面转换完成时，它从左侧开始。请参考这个小提琴（ Working Code ），您可以了解发生了什么。首先，我从下拉菜单中点击“第1页”。第一个div来自右到左（←）和它的完美，然后我点击First Div和Second 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");
      });
    });

Answer 1

您正在移动容器1＆amp; 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

Jquery Div滑动过渡从右到左不能正常工作

1 个答案: