ボタンアニメーションの問題

Question

ボタンのアニメーションに問題があります。これは私が望んでいた

​​

、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があります。ボタンはもうフェードインとちょうど1秒後にポップアップ表示されません。このCSSで

<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> 

を。これを引き起こしたアイデアか、私は何か愚かなことをしましたか（おそらくケース：D）？

お手数をおかけしていただきありがとうございます。

Answer 1

を望んでいたものですホープ、この使用して不透明度試してみてください。私が知っている

$(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>

Answer 2

すべてのボタン要素は同じid値を持ちます。 Idは要素ごとに一意でなければなりません。

Answer 3

私は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>