如何在正面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

回答

相關問題