css/javascript start faded out by default, then fade in

问题

I'm trying to make a button that causes a green check image to fade in then fade out again. It mostly works, but how do I make the check start out in the faded out position when the page loads?

I tried to put opacity: 0; in its css, assuming that the fadeIn function changes the opacity, but then it doesn't show up at all.

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

Is there some other transparency property that fadeIn/fadeOut uses that I can set in the css before those are called? Or maybe prevent the opacity in the css from overriding the fadeIn function?

Thanks

回答1:

I'd use display:none in css to hide on page load:

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

来源：https://stackoverflow.com/questions/43443029/css-javascript-start-faded-out-by-default-then-fade-in

标签

javascript

jquery

opacity

fadein

fadeout