使用Jquery单击单击移动相应的Div

Question

在主要包装内,我有5个分区.第一个div包含4个Box(box_1,box_2,box_3,box_4),其中我的点击事件将发生.

主包装内的其他4个div分别是box_1,box_2,box_3,box_4的内容.

当我点击我的第一个框时,click事件应该为第一个div设置动画(向右滑动),box_1 div应该向右滑动.

这是我迄今为止所做的JS小提琴链接.

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

我只添加了box_1 id以向右滑动.我想为所有人编写通用代码.即如果我点击第二个框,第二个框sd从右边动画,如果我点击第三个框,第三个框应该从左边动画.

当我点击它们时,如何访问4个Div的corressponding内容div.注意:我已将单击事件附加到所有4个div.

*以上问题解决了** 新问题,

我已在每个box_container部分添加回菜单href链接.单击此超链接,将再次带回幻灯片右侧的动画效果返回"菜单"部分.菜单部分将来到窗口和幻灯片动画.

以下代码正常运行.

问题是当我点击任何一个盒子时,会出现相应的盒子容器.当我点击超级链接选项"返回菜单"时,我甚至返回菜单部分.即4盒部分.问题始于此处.如果我再次点击任何一个框,移动到相应的框容器.点击超链接回到后面,菜单即4个盒子部分只是从屏幕上消失.

注意:这次警报会消失两次.

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>

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

JQUERY

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

将您的 box_1_sec 替换为

$("#"+clicked_id+"_sec")

这就能解决问题