как скрыть div, когда передний div меньше

Есть ли способ скрыть div, когда передний div меньше. Я хочу анимировать черный ящик слева, но быть видимым, когда идет через левую сторону зеленой коробки. я пытался переполнения-х: скрытый не повезло ..как скрыть div, когда передний div меньше

Другой вопрос. Могу ли я использовать jquery toggle() для зеленой коробки? я попытался .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 меньше

ответ

Смежные вопросы