앞쪽 div가 작을 때 div를 숨기는 방법

앞쪽 div가 작을 때 div를 숨길 방법이 있습니까? 검은 상자 왼쪽에 애니메이션을 적용하고 녹색 상자의 왼쪽을 볼 때 보이게하려고합니다. 내가 오버 플로우-X를 시도 : 행운 숨겨진 ..앞쪽 div가 작을 때 div를 숨기는 방법

또 다른 질문입니다. 녹색 상자에 jquery 토글()을 사용할 수 있습니까? 내가

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

사용하여 두 가지를 포함합니다 숨겨진 오버 플로우와 100 × 100 #parent에게 .. ("슬라이드"), 블랙 박스 슬라이드 왼쪽으로 간다뿐만 아니라 너무 줌을 실행을 .toggle 시도 요소
위치 #greenright:0 및 #black 부모의 right:100px.

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

왼쪽으로 슬라이드 (당신이 원하는 경우 CSS3를 사용하여) #parent 클릭 애니메이션 부모 폭에 @NickD 두 어린이를 올바른 위치로 이동하기 만하면됩니다. 녹색은 0, 검은 색은 100 :) Simple. –

바로 그 점에 ... 감사합니다. – NickD

앞쪽 div가 작을 때 div를 숨기는 방법

답변

관련 문제