javascript - 如何用另一个 div 隐藏动画 div

Question

我正在努力使灰色框在离开红色框后隐藏起来。将要隐藏的父级正是开箱即用的部分。如果一半的盒子在外面，只有一半的盒子变得不可见。

$( "#right" ).click(function() {
  $( ".block" ).animate({ "left": "+=50px" }, "slow" );
});
 
$( "#left" ).click(function(){
  $( ".block" ).animate({ "left": "-=50px" }, "slow" );
});

 .block {
    position: absolute;
    background-color: #abc;
    left: 50px;
    width: 90px;
    height: 90px;
    margin: 5px;
  }
  
  .big_block {
    
    left: 100px;
    right: 100px;
     background-color: red;
     height: 100px;
     width: 100px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="left">&laquo;</button>
<button id="right">&raquo;</button>
<div class="big_block">

<div class="block"></div>
</div>

将 z-index: 1 添加到 big_block 类并没有帮助，因为它使它完全位于顶部

Answer 1

将position:relative添加到big_block并使用overflow:hidden

$("#right").click(function() {
  $(".block").animate({
    "left": "+=50px"
  }, "slow");
});

$("#left").click(function() {
  $(".block").animate({
    "left": "-=50px"
  }, "slow");
});

.block {
  position: absolute;
  background-color: #abc;
  left: 50px;
  width: 90px;
  height: 90px;
  margin: 5px;
}

.big_block {
  position: relative;
  left: 100px;
  right: 100px;
  background-color: red;
  height: 100px;
  width: 100px;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="left">&laquo;</button>
<button id="right">&raquo;</button>
<div class="big_block">

  <div class="block"></div>
</div>