<!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.