How can i make the image appear only 2 seconds after click in show content?




<!DOCTYPE html>

<html>

​

<style>
img {
	visibility: hidden;
}
button {
	float: left;
	margin: 5px;
}
</style>

<body>

<img src="http://www.edmdistrict.com/wp-content/uploads/2016/04/Sun-Smiling-Blue-Sky-Cartoon-Fotolia_9210923_XS.jpg" id="myP" class="hello">

​

<button type="button" onclick="myFunction()">Hide content of p</button>

<button type="button" onclick="myFunction2()">show content of p</button>

​

<script>

function myFunction() {

  document.getElementById("myP").style.visibility="hidden";

  

}

function myFunction2() {

  document.getElementById("myP").style.visibility="visible";


  

}

</script>

​

</body>

</html>

​


Read all about it. setTimeout on MDN. https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout

1 Like

This isn’t a whole story, but have you tried tried to integrate @keyframes into your code?

My suggestion is to use CSS transitions. I guess keyframes could work too.

The idea is like this:

img {
    transition: visibility 2s linear;
}

img.showme {
    visibility: visible;
}

img.hideme {
    visibility: hidden;
}

Then use javascript to add classnames to img tag.