javascript - 研究 Jquery 中的 Animate()。

Question

在 Main Wrapper 中，我有 5 个 Div。第一个 div 包含 4 个 Box(box_1, box_2,box_3,box_4)，我的点击事件将在其中发生。

另外4个div在main wrapper里面，分别是box_1, box_2, box_3, box_4的内容。 所有框都包含一个带有唯一 ID 的超链接标记，以移回第一个 div。

第一次，当我点击任何菜单时，相应的框容器出现。

例如，点击红框 > 移动到 Box-1 内容 > 点击返回菜单 > 移动到 4 彩色框部分。

再次点击 Gany 框。比方说，绿色框 > 移至 Box2 容器 > 单击返回菜单 > 糟糕!!!我的 4 色盒子从我的屏幕上滑出。

这是 JS Fiddle 链接。我希望 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");
                            }
                         });
            }
         });
    });
});