Kerry Kerry - 10 days ago 5
CSS Question

Hide image after 10 seconds

Is there a way using HTML and CSS can I hide an image after 10 seconds? If it's not possible, is there any easy way to do it with just JavaScipt (not jQuery, I don't want to add jQuery library to my HTML page unless its highly required).

Answer

To hide instantly -

setTimeout(function() {
  document.getElementById('imageID').style.display='none'
}, 10*1000);

EDIT:- To animate hide using pure JS

function start(){

window.timerID =  setInterval(function() {
var aOpaque = document.getElementById('imageID').style.opacity;
aOpaque = aOpaque-.1;

aOpaque = aOpaque.toFixed(1);   

document.getElementById('imageID').style.opacity = aOpaque;

if(document.getElementById('imageID').style.opacity<=0)
clearInterval(window.timerID);
},1000);
}

window.onload = function(){start();} 

In the markup <image id="imageID" style="opacity:1"> remember to give style="opacity:1" inline css attribute.