Question

我需要水平移动div父级，直到特定的子级可见，考虑到有一个命令，第一个是child1，然后是child2，最后是child3。我打算通过添加左右按钮来做到这一点。所以这就像我试图用自己构建的滑块一样，如何通过使用animate jquery函数或其他解决方案来实现这一点。

<div id="container" style="width:500px;overflow:hidden" >
     <div id="parent" style="width:1500px">
         <div id="child1" style="width:500px;float:left">
         </div>
         <div id="child2" style="width:500px;float:left">
         </div>
         <div id="child2" style="width:500px;float:left">
         </div>
     </div>

</div>

Answer 1

我会做这样的事情（删除你的内联样式并将其添加为CSS以便更好地查看）

HTML

<div id="container">
   <div id="parent">
     <div class="box" id="child1"></div>
     <div class="box" id="child2"></div>
     <div class="box" id="child3"></div>
   </div>
</div>


<button class="btn1">slide 1</button>
<button class="btn2">slide 2</button>
<button class="btn3">slide 3</button>

CSS

#container{
  width: 500px;
  height: 100px;
  overflow: hidden;
  position: relative;
}

#parent{
  width: 1500px;
  height: 100px;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.box{
  width: 500px;
  height: 100px;
  background: black;
  float: left;
}

#child2{
  background: red;
}

#child3{
  background: blue;
}

JS

$(".btn1").click(function(){
  $("#parent").animate({"left":"0px"});       
});

$(".btn2").click(function(){
  $("#parent").animate({"left":"-500px"}); 
});

$(".btn3").click(function(){
  $("#parent").animate({"left":"-1000px"}); 
});

FIDDLE

移动容器div直到找到某个孩子

1 个答案: