в приведенном ниже примере есть золотой div с именем she
на самом деле это изображение с такими же свойствами
нажимая на кнопку, мне нужно, чтобы she
открывался постепенно и не двигался с нижней стороной родителя
так же, как story
- он фиксируется и раскрывается постепенно при скольжении родителя.
$('button').on('click', function(){
$('#swtop').slideToggle();
});
.swtop{
display:none;
background:lightblue;
position:relative;
}
.space{height:34px;}
.story{text-align:center;}
.she{
position:absolute;
left:25px; bottom:0; width:5%;
background:gold;
}
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>CLICK</button>
<br><br>
<div class='swtop' id='swtop'>
<div class='space'></div>
<div class='story'>LOREM IPSUM</div>
<div class='space'></div>
<div class='she'><br><br><br></div>
</div>
@TemaniAfif - мне нужно, чтобы это изображение she
было внизу слева - наверное, абсолютно необходимо
Рассмотрим дополнительную обертку:
$('button').on('click', function() {
$('#swtop').slideToggle();
});
.swtop {
display: none;
background: lightblue;
}
.swtop > div {
position: relative; /* we move this to the extra wrapper */
}
.space {
height: 34px;
}
.story {
text-align: center;
}
.she {
position: absolute;
left: 25px;
bottom: 0;
width: 5%;
background: gold;
}
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>CLICK</button>
<br><br>
<div class='swtop' id='swtop'>
<div>
<div class='space'></div>
<div class='story'>LOREM IPSUM</div>
<div class='space'></div>
<div class='she'><br><br><br></div>
</div>
</div>
И это еще один способ сделать его красивым.
let sts = false;
$('button').on('click', function(){
sts = !sts;
if (sts){
$('#swtop').slideToggle();
setTimeout(function(){
$('.she').fadeToggle();
}, 300);
}else{
$('.she').fadeToggle();
setTimeout(function(){
$('#swtop').slideToggle();
}, 300);
}
});
.swtop{
display:none;
background:lightblue;
position:relative;
}
.space{
height:34px;
}
.story{
text-align:center;
}
.she{
position:absolute;
left:25px;
bottom:0;
width:5%;
background:gold;
display: none;
}
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>CLICK</button>
<br><br>
<div class='swtop' id='swtop'>
<div class='space'></div>
<div class='story'>LOREM IPSUM</div>
<div class='space'></div>
<div class='she'><br><br><br></div>
</div>
а вам нужна позиция: абсолютная?