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

Question

I am working on to make the gray box hidden once it's out of the red box. The parent that is going to be hidden is exactly the part that is out of the box. If half of the box is out, only half of the box becomes invisible.

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

adding z-index: 1 to big_block class has not helped coz it makes it completly on top

Answer 1

Add position:relative to big_block and use 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>