How would i make it so that a div hides in a certain amount of time

Question

I want to make a wackamole game and I want the mole (a div) to only stay viewable for a certain amount of time. Is there any way that I can do this wit javascript

 <div class="mole">mole</div> 

Answer 1

Use setTimeout(function, delay)

 setTimeout(function() { document.getElementsByClassName("mole")[0].style.display = 'none'; }, 1000); 

 <div class="mole">mole</div> 

Note that it might be good to give your element an id, that way you can target the element directly. Now I'm just picking the first (and in the example the only) element with the mole class.

Answer 2

Use setTimeout(function,milliseconds,param1,param2,...) where

function - Required. The function that will be executed

milliseconds - Optional. The number of milliseconds to wait before executing the code. If omitted, the value 0 is used

param1,param2,... - Optional. Additional parameters to pass to the function (Not supported in IE9 and earlier)

 setTimeout(function(){ $(".mole").hide() }, 3000); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="mole">mole</div>