JSFiddle - React, Tailwind, and code Playground
HTML
<div id="image"></div>
<div><a href="#" id="enlace">click to see the cat</a></div>
CSS
#image {
background: #ccc;
display: none;
width: 100px;
height: 100px;
}
#image._show {
display: block;
}
JavaScript
var showImage = function() {
$('#image').addClass('_show');
};
var hideImage = function() {
$('#image').removeClass('_show');
};
// simulates bussy proccess, calling some function...
// see: http://unixpapa.com/js/sleep.html
var sleepStupidly = function(usec) {
var endtime = new Date().getTime() + usec;
while (new Date().getTime() < endtime);
};
$(document).ready(function() {
$('#enlace').click(function() {
showImage();
window.setTimeout(function() {
sleepStupidly(4000);
alert('now you do see it');
hideImage();
}, 50);
});
});