javascript - 如何为右侧做一个消失的元素，就像它为左侧工作一样

Question

我正在尝试隐藏右侧的溢出但无法正常工作。

基本上，我希望元素在向右动画时隐藏，就像向左动画一样。

$("#left_btn").click(function(){
       $("#container").animate({
                left: '+=200px'
            }, 'slow');        
    })
    
    
        $("#right_btn").click(function(){
        $("#container").animate({
                left: '-=200px'
            }, 'slow'); 
    })

#container{

  position: absolute;
  left: 180px;
  bottom: 150px;
  top: 40px;
   
}



#image_one_div {
  position: relative;
  float:left;

}

#image_two_div {
  position: relative;
  float:left;

}
#image_three_div{
  position: relative;
  float:left;

}


#image_one_div, #image_two_div, #image_three_div {
  
  width: 60px;
  height: 60px;
  background-color: red;
  margin-left: 3px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="right_btn">
left
</button>
<button id="left_btn">
right
</button>


<div id="container">



<div id="image_one_div">

</div>

<div id="image_two_div">

</div>
<div id="image_three_div">


</div>

</div>

现在向右的动画使元素在另一个之上。如何解决这个问题？我将不胜感激任何建议

Answer 1

你必须为 #container dom 元素使用 overflow: hidden; 并且你必须设置 #container 的 right 为您提供适当的值(value)。它必须运行良好。

$("#left_btn").click(function(){
       $("#container").animate({
                left: '+=200px'
            }, 'slow');        
    })
    
    
        $("#right_btn").click(function(){
        $("#container").animate({
                left: '-=200px'
            }, 'slow'); 
    })

#container{

  position: absolute;
  left: 180px;
  right: 180px;
  bottom: 150px;
  top: 40px;
  overflow: hidden;
}



#image_one_div {
  position: relative;
  float:left;

}

#image_two_div {
  position: relative;
  float:left;

}
#image_three_div{
  position: relative;
  float:left;

}


#image_one_div, #image_two_div, #image_three_div {
  
  width: 60px;
  height: 60px;
  background-color: red;
  margin-left: 3px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="right_btn">
left
</button>
<button id="left_btn">
right
</button>


<div id="container">



<div id="image_one_div">

</div>

<div id="image_two_div">

</div>
<div id="image_three_div">


</div>

</div>