当前面的div较小时如何隐藏div答案

【问题标题】：how to hide div when the front div is smaller当前面的div较小时如何隐藏div
【发布时间】：2016-08-01 10:36:28
【问题描述】：

当前面的 div 较小时，有什么方法可以隐藏 div。我想为左侧的黑框设置动画，但在通过绿框左侧时可见。我试过overflow-x: hidden with no lucky..

另一个问题。我可以使用 jquery toggle() 到绿框吗？我尝试了.toggle("slide")，黑框向左滑动但也执行了缩小..

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">    </script>
<script> 
$(document).ready(function(){
    $("#green").click(function(){
        $("#black").animate({left: '-250px'});
    });
});
</script> 
</head>
<body>
Click on green box to animate black one
<div id="green" style="background:#98bf21;height:100px;width:100px;position:absolute;margin-left:300px;z-index:10;overflow-x: hidden;"></div>
<div id="black" style="background:#1d1d1c;height:100px;width:260px;position:absolute;margin-left:300px;z-index:1;"></div>

【问题讨论】：

标签： jquery css

【解决方案1】：

使用 100x100 #parent 隐藏溢出，将包含您的两个元素。
将#green 定位在right:0 和#black 在父母的位置 right:100px。
在#parent 上单击动画父宽度（如果你想要）

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>

<style>
  #parent {
    position: absolute;
    right: 0px;     /* position parent wherever you want */
    height: 100px;
    width: 100px;
    overflow: hidden;
    /* contain children elements */
    /* basivcally all same as green DIV initially...*/
    transition: 0.4s;
    -o-transition: 0.4s;
    -ms-transition: 0.4s;
    -moz-transition: 0.4s;
    -webkit-transition: 0.4s;
  }
  #parent.enlarge {
    /* Added by jQuery on click */
    width: 360px;  /* 260 + 100 */
  }
  #green {
    background: #98bf21;
    height: 100px;
    width: 100px;
    position: absolute;
    /*margin-left: 300px;*/
    right:0; /* position at parent right 0 */
    /*z-index: 10; you don't need Z index ins you place HTML order properly */
    overflow-x: hidden;
  }
  #black {
    background: #1d1d1c;
    height: 100px;
    width: 260px;
    position: absolute;
    right: 100px; /* position at parent right 100px */
    margin-left: 300px;
  }
</style>


<body>

  Click on green box to animate black one
  <div id="parent">
    <div id="black"></div> <!-- invert order to prevent z-index in CSS -->
    <div id="green"></div>
  </div>

  <script>
    jQuery(function($) {
      $("#parent").click(function() {
        $(this).toggleClass("enlarge");
      });
    });
  </script>
</body>

</html>

【讨论】：

@NickD 已编辑！只需将两个孩子移动到正确的位置。 0 为绿色，100 为黑色 :) 简单。
只在绿框点击时如何滑动黑框（进出）？
@NickD 你看过我的演示吗？有一个蓝色的大按钮 [运行代码片段]。如果您希望仅在单击绿色元素时应用效果，您应该更改 jQuey 以适应所需的元素选择器：$("#green").click(function() { $("#parent").toggleClass("enlarge"); });
我今天试过了，但它不起作用......现在我再次测试它并且它起作用了......也许我的代码有错误......无论如何再次感谢Roko ;)