Kerry Kerry - 8 months ago 53
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 Source

To hide instantly -

setTimeout(function() {
}, 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;


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

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