jQuery fadeIn выталкивает содержимое из позиции

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

Я создал демонстрационную версию, которая показывает кнопку 2, появляющуюся через 1 секунду после загрузки страницы. Однако проблема в том, что это перемещает положение кнопки 1 вверх, но я бы предпочел, чтобы оно вообще не перемещалось.

Я знаю, что это можно было бы исправить, используя абсолютные значения положения, не используя пробел между ними и т.д., Но я хочу иметь возможность исправить это, сохранив текущий CSS.

Как это можно исправить? Я пытался изменить видимость со скрытой на видимую, но проблема в том, что она не исчезает должным образом. Любые идеи о лучших приемах или советах для этого были бы очень полезны, спасибо.

Codepen: https://codepen.io/anon/pen/KEWjNm

 setTimeout(() => $('#btn-2').fadeIn('slow'), 1000);  
 div {
  background: pink;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  width: 100%;
  height: 100vh;
}

#btn-2 { display: none }  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <button id='btn-1'>button 1</button>
  <button id='btn-2'>button 2</button>
</div>  

Комментарии:

1. 1. почему бы не изменить css 2. Каково ожидаемое поведение, что кнопка 2 исчезает поверх кнопки 1?

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

3. Проблема связана с гибким столбцом и выравниванием элементов по центру по вертикали, при добавлении новой кнопки он соответствующим образом настраивается

4. Можем ли мы изменить html?

5. На самом деле, извините, да — CSS и HTML могут быть изменены

Ответ №1:

Для достижения ожидаемого результата изначально используйте опцию animate с непрозрачностью: 0 для btn2

 setTimeout(() => $('#btn-2').animate({opacity:1}, 1000), 1000);  
 div {
  background: pink;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  width: 100%;
  height: 100vh;
}

#btn-2 { opacity: 0 }  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <button id='btn-1'>button 1</button>
  <button id='btn-2'>button 2</button>
</div>  

codepen — https://codepen.io/nagasai/pen/oVZrMK

Ответ №2:

Вы можете использовать контейнер, затем по одному div на кнопку:

Где контейнер имеет стили:

 div.container {
      background: pink;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-evenly;
      width: 100%;
      height: 100vh;
    }  
 <div class='container'>
    <div>
      <button id='btn-1'>button 1</button>
    </div>
    <div>
      <button id='btn-2'>button 2</button>
    </div>
    </div>  

Комментарии:

1. это почти делает это, но вы можете видеть, что это немного меняется — я сделал перо с вашим кодом: codepen.io/anon/pen/LaWKgK