ページが読み込まれてから2秒後にdivを表示する必要があります

Question

ページが読み込まれてから2秒後に.affor divが必要になります。私はjquery、任意のアドバイスでこれをしようとしていますか？あなたは.delay()のためのマニュアルを読む必要があり

$(document).ready(function(){ 
 
    $('.affor').hide(function(){ 
 
    $(this).delay(function(){ 
 
     $(this).show(); 
 
    }); 
 
    }); 
 
});

.affor{ 
 
    width:200px; 
 
    height:200px; 
 
    background-color: rgb(39, 60, 79); 
 
    /*border-radius: 100px;*/ 
 
    color:white; 
 
    text-align: center; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    flex-wrap: wrap; 
 

 
    transition: 2s ease-in; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class=".affor"> Hello </div>

Answer 1

。また、クラス内に.を持つべきではありません。 CSSでは、クラスに.を使用します。 displayがflexに設定されているあなた、フェードインの正しい方法は動作しませんので

$(document).ready(function() { 
 
    $('.affor').hide(0, function() { 
 
    $(this).delay(2000).fadeIn(1000); 
 
    }); 
 
});

.affor { 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: rgb(39, 60, 79); 
 
    /*border-radius: 100px;*/ 
 
    color: white; 
 
    text-align: center; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    flex-wrap: wrap; 
 
    transition: 2s ease-in; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="affor">Hello</div>

：あなたはこのようなものを使用する必要があります。

Answer 2

あなたはです。はjQueryでこの効果を達成します。

.affor { 
 
    width:200px; 
 
    height:200px; 
 
    background-color: rgb(39, 60, 79); 
 
    border-radius: 100px; 
 
    color:white; 
 
    text-align: center; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    flex-wrap: wrap; 
 
    animation: sayHello 3s ease-out; 
 
} 
 

 
@keyframes sayHello { 
 
    0% {opacity: 0;} 
 
33% {opacity: 0;} 
 
100% {opacity: 1;} 
 
}

<div class="affor">Hello</div>

：

しかし、（おそらく単純）あなたも一人でCSS @keyframesでそれを達成することができます