Question

我构建了一个演示，该演示显示了在页面加载1秒后出现的按钮2。但是，问题在于它使按钮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>

Answer 1

您可以使用容器，然后每个按钮使用一个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>

Answer 2

要获得预期结果，请使用不透明度的animate选项：最初对btn2使用0

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

jQuery FadeIn将内容推出位置

2 个答案: