问题动画按钮​​

Question

我在制作按钮动画时遇到了一些问题。首先，我在窗口加载此代码后显示按钮：

$(window).on('load',() => { // console.log("content loaded") $('.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>

Answer 2

所有按钮元素都具有相同的id值。每个元素的ID应该是唯一的。

Answer 3

使用不透明度尝试：

$( document ).ready(function() {
   $('.button').delay(1000).fadeTo( "slow", 1 );
});

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

.button {
opacity:0;
  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:1s ease-in-out;
}

.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/2.1.1/jquery.min.js"></script>
<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>