css/javascript commencent à disparaître par défaut, puis à fondu

Question

J'essaie de créer un bouton qui fait apparaître une image de contrôle verte avant de disparaître à nouveau. Cela fonctionne principalement, mais comment faire pour que la vérification commence dans la position évanouie lorsque la page se charge?

J'ai essayé de mettre opacity: 0; dans son css, en supposant que la fonction fadeIn change l'opacité, mais qu'elle n'apparaisse pas du tout.

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

Y at-il une autre propriété de transparence qui fadeIn/fadeOut utilise que je peux mettre en avant les css sont appelés? Ou peut-être empêcher l'opacité dans le css de surcharger la fonction fadeIn?

Merci

Answer 1

j'utiliser display: none à se cacher sur css chargement de la page:

#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'/>