CSS/JavaScriptがデフォルトでフェードアウトしてからフェードインします

Question

緑色のチェック画像が消えるようにするボタンを作成しようとしていますが、もう一度フェードアウトします。主に動作しますが、ページが読み込まれたときに、チェックアウトを退屈な状態にするにはどうすればよいですか？

fadeIn関数が不透明度を変更すると仮定しても、opacity: 0;を入れようとしましたが、全く表示されません。

function green_check(check) { //fade in half a sec, hold 2 sec, fade out in 3 sec 
 
    $(check).fadeIn(500, function() { 
 
    $(this).delay(2000).fadeOut(3000); 
 
    }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type="button" onclick="green_check(getElementById('check'));">Show Check</button> 
 

 
<img class='five_sec_check' width="50" height="50" id="check" src='http://cliparts.co/cliparts/qcB/Bex/qcBBexbc5.png' />

フェードイン/フェードアウトがそれらが呼び出される前に、私はCSSで設定できることを利用し、いくつかの他の透明性のプロパティがありますか？あるいは、CSSの不透明度がfadeIn関数をオーバーライドしないようにする？

おかげ

Answer 1

私は、ディスプレイを使用したい：ページのロード時に非表示にするには、CSSでなし：

#check { 
    display:none; 
} 

function green_check(check){ //fade in half a sec, hold 2 sec, fade out in 3 sec 
 
    $(check).fadeIn(500, function() { 
 
     $(this).delay(2000).fadeOut(3000); 
 
    }); 
 
}

#check { 
 
    display:none; 
 
    width:16px; 
 
    height:16px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type="button" onclick="green_check(getElementById('check'));">Show Check</button> 
 

 
<img class='five_sec_check' id="check" src='http://neil.computer/s/check.png'/>