移動容器div直到找到某個孩子

Question

我需要水平移動div父元素，直到特定的子元素可見，考慮到有一個順序，第一個孩子1，然後是child2，最後是child3。我打算通過添加左右按鈕來做到這一點。所以這就像我試圖通過我自己構建的滑塊，我怎樣才能通過使用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