#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