<div id="elementID">
</div>
#elementID {
width: 200px;
height: 200px;
background-color: red;
}
var yourElement = document.getElementById("elementID");
var opcty = 1; // opacity value
function fade() {
opcty = opcty - 0.05; // gives 20 steps of opacity
yourElement.style.opacity = opcty.toString();
if (opcty > 0) setTimeout(fade, 200); // 200ms per step
else yourElement.style.opacity = "1.0"; // show element again
}
yourElement.addEventListener("click", function () {
setTimeout(function () {
// fadeout logic goes here
fade();
// remove an element logic goes here
}, 5000);
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.