Question

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

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

当我点击我的第一个框时，点击事件应该为第一个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")

这将解决问题

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

HTML

CSS

JQUERY

1 个答案: