Развернуть фоновый триггер jQuery не работает

Цель состоит в том, что когда вы нажимаете на изображение за красным квадратом, красный квадрат расширяется на всю веб-страницу.

enter image description here

Но в тот момент, когда вы нажимаете на изображение, переход воспроизводится так...

enter image description here

enter image description here

... и закончилось так.

enter image description here

когда вы нажимаете на красный расширенный квадрат, он идеально переходит обратно к этому, но в другой форме, а не в том, где он был в начале.

enter image description here

$(".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, чтобы расширить красный квадрат на всю ширину веб-страницы, но это не сработало.

Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
0
0
28
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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.

Спасибо, но красный квадрат должен расширяться за пределы родительского блока, чтобы отображать веб-страницу в полноэкранном режиме, а не внутри родительского блока — надеюсь, это поможет! Также, когда вы закрываете красный квадрат, он переходит в центр, но когда вы открываете, он начинается справа, а не в центре.

Christian Luneborg 10.04.2022 01:23

@ChristianLuneborg да. В моем примере я работаю только над расширяющейся/сворачивающейся частью. Чтобы сделать полную веб-страницу, было бы лучше, если бы вы использовали position: fixed для красного поля вместо того, чтобы манипулировать его размером, как то, что вы делаете сейчас. Кроме того, если вы использовали position: fixed, то он также не должен находиться ни в одном элементе-контейнере. Попробуйте поискать modal и посмотрите, это то, что вы ищете.

Tree Nguyen 10.04.2022 01:26

position: fixed; работает! Собираюсь посмотреть, смогу ли я работать над самим переходом. Это не выглядит идеально. Благодарю вас!

Christian Luneborg 10.04.2022 01:57

Другие вопросы по теме