フロントdivが小さい場合divを隠す方法

フロントdivが小さい場合はdivを隠す方法はありますか？黒いボックスを左に動かすが、緑のボックスの左側を見ると見えるようにしたい。私はオーバーフロー-Xを試してみました：運に隠された..フロントdivが小さい場合divを隠す方法

もう一つの問題。緑色のボックスにjqueryのトグル（）を使用できますか？あなたの2が含まれていますオーバーフロー隠されたと100×100 #parentを使用

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

..私は、（「スライド」）.toggleをしようとしたブラックボックスは、左のスライドになりますが、あまりにもズームを実行します要素。
#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

私は左にスライドさせる緑色の静的および黒の1を保持したい... – NickD

@NickD両方の子供を正しい位置に移動するだけです。 0で緑、100で黒:)単純です。 –

それはちょうどポイントです... ありがとうございます。 – NickD

フロントdivが小さい場合divを隠す方法

答えて

関連する問題