如何为右侧执行与左侧相同的消失元素

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。它必须运行良好。

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