Развернуть фоновый триггер jQuery не работает
Цель состоит в том, что когда вы нажимаете на изображение за красным квадратом, красный квадрат расширяется на всю веб-страницу.
Но в тот момент, когда вы нажимаете на изображение, переход воспроизводится так...
... и закончилось так.
когда вы нажимаете на красный расширенный квадрат, он идеально переходит обратно к этому, но в другой форме, а не в том, где он был в начале.
$(".img-placeholder").on("click", function() {
$(".img-placeholder").addClass("w-full");
$(".expandBG").toggleClass("content-portf");
$(".text-portf").delay(500).fadeIn();
});.img-placeholder {
width: 24vw;
height: 178px;
margin-top: 13px;
text-align: center;
position: relative;
cursor: pointer;
overflow: hidden;
max-width: 99%;
border: solid #08a6ff 1px;
display: grid;
}
.expandBG {
width: 50px;
height: 50px;
transition: ease 0.3s;
background-color: #ff0022;
margin: 0 auto;
text-align: center;
font-family: sans-serif;
color: #fff;
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.closeit {
text-align: center;
cursor: pointer;
width: 100%;
margin: 0 auto;
z-index: 1;
position: relative;
border: solid blue 1px;
}
.text-portf {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.content-portf {
width: 100%;
height: 50vw;
position: relative;
margin: 0 auto;
cursor: pointer;
background-color: #ff0022;
}
.w-full {
width: 100%;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="img-placeholder">
<div class="expandBG">
<div class="content-portf text-portf" style="display: none;">
<div>(CONTENT HERE)</div>
</div>
</div>
<div class="rotating-imgs animation">
<img class="animation_image" src="imgs/rotating-img1.png" />
</div>
</div>Я добавил .w-full { width: 100%; } в jQuery, чтобы расширить красный квадрат на всю ширину веб-страницы, но это не сработало.
Ответы 1
Это моя версия код.
Изменение совсем небольшое, только это
$(".text-portf").delay(500).fadeIn();
к этому
$(".text-portf").delay(500).toggle();
Если вы отлаживаете свое HTML-дерево в своем коде после того, как дважды щелкнете поле, вы сможете увидеть, что .expandBG в порядке. Он придерживается правильного размера, который вы ему даете (50x50). Проблема возникает из-за того, что ваш .text-portf все еще имеет высоту 50vw (применяется из content-portf CSS). Это в основном переполняет контейнер .expandBG. Вы можете убедиться в этом сами, добавив
overflow: hidden;
в .expandBG css.
@ChristianLuneborg да. В моем примере я работаю только над расширяющейся/сворачивающейся частью. Чтобы сделать полную веб-страницу, было бы лучше, если бы вы использовали position: fixed для красного поля вместо того, чтобы манипулировать его размером, как то, что вы делаете сейчас. Кроме того, если вы использовали position: fixed, то он также не должен находиться ни в одном элементе-контейнере. Попробуйте поискать modal и посмотрите, это то, что вы ищете.
position: fixed; работает! Собираюсь посмотреть, смогу ли я работать над самим переходом. Это не выглядит идеально. Благодарю вас!
Спасибо, но красный квадрат должен расширяться за пределы родительского блока, чтобы отображать веб-страницу в полноэкранном режиме, а не внутри родительского блока — надеюсь, это поможет! Также, когда вы закрываете красный квадрат, он переходит в центр, но когда вы открываете, он начинается справа, а не в центре.