javascript - 动画按钮的问题

Question

我在为按钮设置动画时遇到了一些问题。首先，我使用以下代码在窗口加载后显示按钮:

$(window).on('load',() => {
//console.log("内容已加载")
$('.button').delay(1000).fadeIn(3000)
});

这做了我想要的，在 1 秒后淡入。然后我制作了一些 CSS:

.wrapper {
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
  bottom: 0;
  right: 0;
  align-items: center;
  justify-content: center;
}

.button {
  display: none;
  background-color: rgba(255, 255, 255, 0.2);
  background-repeat:no-repeat;
  width: 150px;
  padding: 20px;
  color: #000; 
  border: 3px solid rgb(48, 48, 48);
  border-radius: 20px 20px 20px 20px;
  margin:0 5px;
  transition: ease 1s;
}

.button:hover {
  background-color: rgba(255, 255, 255, 0.5);
  border: :3px solid rgb(35, 35, 35);
  border-radius: 10px 10px 10px 10px;
  transition: ease 1s;
}

我有这个 HTML:

<div class="wrapper">
    <button class="button" id="">Ex. 1</button>
    <button class="button" id="">Ex. 1</button>
    <button class="button" id="">Ex. 1</button>
    <button class="button" id="">Ex. 1</button>
    <button class="button" id="">Ex. 1</button>
</div>

使用此 CSS，按钮不再淡入，仅在 1 秒后弹出。知道是什么原因造成的，还是我做了一些愚蠢的事情(可能是这样 :D)？

谢谢，如果你能帮忙!

Answer 1

我对 js 做了一个小改动。希望这就是你想要的

$(document).ready(function(){
 console.log("content loaded")
 $('.button').fadeIn('slow');
  $('.button').fadeIn(3000);
  });

.wrapper {
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
  bottom: 0;
  right: 0;
  align-items: center;
  justify-content: center;
}

.button {
  display: none;
  background-color: rgba(255, 255, 255, 0.2);
  background-repeat:no-repeat;
  width: 150px;
  padding: 20px;
  color: #000; 
  border: 3px solid rgb(48, 48, 48);
  border-radius: 20px 20px 20px 20px;
  margin:0 5px;
  transition: ease 1s;
}

.button:hover {
  background-color: rgba(255, 255, 255, 0.5);
  border: :3px solid rgb(35, 35, 35);
  border-radius: 10px 10px 10px 10px;
  transition: ease 1s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="wrapper">
    <button class="button" id="id">Ex. 1</button>
    <button class="button" id="id">Ex. 1</button>
    <button class="button" id="id">Ex. 1</button>
    <button class="button" id="id">Ex. 1</button>
    <button class="button" id="id">Ex. 1</button>
</div>