Javascript 研究Jquery中的Animate（）。

在主包装内，我有5个div。第一个div包含4个框（框1、框2、框3、框4），其中将发生我的单击事件

主包装内的其他4个div分别是box_1、box_2、box_3和box_4的内容。 “所有”框包含一个具有唯一Id的超链接标记，可以移回第一个div

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

e、 g，点击红色方框>移动到方框-1内容>点击返回菜单>移动到4色方框部分

再次点击gany box。比如说，绿色方框>移动到方框2容器>点击返回菜单>Oops！！！我的4色盒子从屏幕上滑出

这里是jsfiddle链接。我希望4色div部分留在屏幕上

##HTML##

JS 每次添加170%或：

"marginLeft":"-=150%"

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

---

Thanx PollyGeek:））））Thanx ProllyGeek:））它有效！！！：）但是，当我多次执行相同的任务时，例如单击菜单，返回容器，然后单击超链接，，，如果我重复执行相同的任务，我的动画效果似乎会延迟。我的动画效果应在单击我的长方体后立即响应。有什么帮助吗？在多次单击Divs后，动画效果会延迟。任何人都可以在这个问题上提供帮助。我的动画速度应该是500。@Swapna请稍等，我会再次检查您的代码。@Swapna您每次按back right键都会收到超过1个警报，因为您的代码正在生成函数调用堆栈。

.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;
}

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

 "marginRight":"+=170%"

"marginLeft":"-=150%"

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