如何在正面div较小时隐藏div

当正面div较小时，有什么方法可以隐藏div吗？我想动画一个黑色的盒子，但是在通过绿色盒子的左侧时可见。我试图溢出 - X：隐藏，没有运气..如何在正面div较小时隐藏div

另一个问题。我可以使用jQuery的切换（）到绿框？我试图.toggle（“幻灯片”），黑匣子去向左滑动，而且也执行放大了..

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

来源

2016-08-01 NickD

使用100x100的#parent与溢出隐藏的事，包含你的两个元素。
位置#green在right:0和#black在父母的 right:100px。
在#parent点击动画母公司宽度（使用CSS3如果你想）

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

来源

2016-08-01 02:26:23

我想抱着绿静和黑一个滑块向左... – NickD

@NickD编辑！只需将两个孩子移到正确的位置。绿色在0和黑色在100 :)简单。 –

这就是要点... 谢谢Roko .. – NickD

如何在正面div较小时隐藏div

回答

相关问题