Question

在主要包装内，我有5个分区。第一个div包含4个Box（box_1，box_2，box_3，box_4），其中我的点击事件将会发生。

主包装内的其他4个div，分别是box_1，box_2，box_3，box_4的内容。所有框都包含一个超链接标记，其中包含唯一ID以移回到第一个div。

第一次，当我点击任何菜单时，corressponding box容器会出现。

例如，点击红框＆gt;移至Box-1内容＆gt;点击返回菜单＆gt;移至4彩盒部分。

再次点击gany框。让我们说，绿盒子＆gt;移至Box2容器＆gt;点击返回菜单＆gt;哎呀！我的4色盒子从我的屏幕上滑出来。

这是JS Fiddle lINK。我希望4色的div部分留在屏幕上。

http://jsfiddle.net/swapnaranjita_nayak/8XcZX/

## HTML ##

<div class="main_wrapper" id="main_wrapper">
    <div class="container_fluid" id="menu">
        <div class="wrapper">
            <div class="row">
                <div class="box1" id="box_1"></div>
                <div class="box2" id="box_2"></div> <div class="clear"></div>
            </div>

             <div class="row">
                <div class="box3" id="box_3"></div>
                <div class="box4" id="box_4"></div> <div class="clear"></div>
            </div>

        </div>
    </div><!---End of Container fluid--->

     <div class="container_fluid" id="box_1_sec" style="display:none;margin-right:-170px;">
         <h1>Box1 Content</h1>
         <a href="#" id="back1">Back to #Menu</a>
    </div>
         <div class="container_fluid" id="box_2_sec" style="display:none;margin-right:-170px;">
         <h1>Box2 Content</h1>
          <a href="#" id="back2">Back to #Menu</a>
    </div>
     <div class="container_fluid" id="box_3_sec" style="display:none;margin-right:-170px;">
         <h1>Box3 Content</h1>
          <a href="#" id="back3">Back to #Menu</a>
    </div>
     <div class="container_fluid" id="box_4_sec" style="display:none;margin-right:-170px;">
         <h1>Box4 Content</h1>
         <a href="#" id="back4">Back to #Menu</a>
    </div>
</div>

CSS

.container_fluid {
    width:100%;
}
.wrapper {
    width:1208px;
    margin:auto;
}
.row {
    padding:3% 3% 3% 3%;
}
.box1 {
    height:100px;
    width:100px;
    background-color:red;
    margin-right:2%;
    float:left;
}
.box2 {
    height:100px;
    width:100px;
    background-color:green;
    margin-right:2%;
    float:left;
}
.clear {
    clear:both;
}
.box3 {
    height:100px;
    width:100px;
    background-color:black;
    margin-right:2%;
    float:left;
}
.box4 {
    height:100px;
    width:100px;
    background-color:brown;
    margin-right:2%;
    float:left;
}

JS

$("#box_1,#box_2,#box_3,#box_4").click(function(){
    var clicked_id=$(this).attr('id');
    var menu=$('#menu');
    menu.animate({
            "marginLeft":"-=150%"
        },
         {
            duration: 500,
            step: function() {
                //console.log( "width: ", i++ );
                console.log($(this).width());
            },
            complete: function() {
                 // console.log("finished");
                 menu.hide();
                       $("#"+clicked_id+"_sec").show();
                         $("#"+clicked_id+"_sec").animate({
                            "marginRight":"+=170%"
                         },
                         {
                            duration: 500,
                            step: function() {
                                //console.log( "width: ", i++ );
                                console.log($(this).width());
                            },
                            complete: function() {
                                 console.log("finished");
                            }
                         });

            }
         });
    $("#back1,#back2,#back3,#back4").click(function(){
        alert($(this).attr('id'));
         $("#"+clicked_id+"_sec").animate({
            "marginRight":"-=170%"
         },
          {
            duration: 500,
            step: function() {
                console.log($(this).width());
            },
            complete: function() {

                 $("#"+clicked_id+"_sec").hide()
                        menu.show();
                          menu.animate({
                            "marginLeft":"+=150%"
                         },
                         {
                            duration: 500,
                            step: function() {

                            },
                            complete: function() {
                                 console.log("finished");
                            }
                         });
            }
         });
    });
});

Answer 1

 "marginRight":"+=170%"

每次添加170％或：

"marginLeft":"-=150%"

减少150％，应该设置，而不是增加或减少值。

http://jsfiddle.net/prollygeek/8XcZX/1/

$("#box_1,#box_2,#box_3,#box_4").click(function(){
    var clicked_id=$(this).attr('id');
    var menu=$('#menu');
    menu.animate({
            "marginLeft":"-=150%"
        },
         {
            duration: 500,
            step: function() {
                //console.log( "width: ", i++ );
                console.log($(this).width());
            },
            complete: function() {
                 // console.log("finished");
                 menu.hide();
                       $("#"+clicked_id+"_sec").show();
                         $("#"+clicked_id+"_sec").animate({
                            "marginRight":"+=170%"
                         },
                         {
                            duration: 500,
                            step: function() {
                                //console.log( "width: ", i++ );
                                console.log($(this).width());
                            },
                            complete: function() {
                                 console.log("finished");
                            }
                         });

            }
         });
    $("#back1,#back2,#back3,#back4").click(function(){
        alert($(this).attr('id'));
         $("#"+clicked_id+"_sec").animate({
            "marginRight":"-=170%"
         },
          {
            duration: 500,
            step: function() {
                console.log($(this).width());
            },
            complete: function() {

                 $("#"+clicked_id+"_sec").hide()
                        menu.show();
                          menu.animate({
                            "marginLeft":"0%"
                         },
                         {
                            duration: 500,
                            step: function() {

                            },
                            complete: function() {
                                 console.log("finished");
                            }
                         });
            }
         });
    });
});

研究Jquery中的Animate（）。

CSS

JS

1 个答案: