Question

当前div较小时，有没有办法隐藏div。我想给左边的黑盒子制作动画，但是当它通过绿色框的左侧时可见。我试过overflow-x：隐藏没有运气..

另一个问题。我可以使用jquery toggle（）到绿框吗？我试过.toggle（＆＃34; slide＆＃34;），黑盒子向左滑动但也执行缩小..

<!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>

Answer 1

使用100x100 #parent隐藏溢出，其中包含您的两个元素。
在#green和right:0位于父母的位置#black right:100px。
在#parent点击动画父级宽度（使用CSS3 if 你想要的）

＆＃13;

<!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>

＆＃13;

当前div较小时如何隐藏div

1 个答案: