Keep the GIF hidden until a button is clicked, show it in the center of the screen, then hide it after two or three seconds. You can do this with plain JavaScript and CSS; jQuery is not required.
Show and hide a GIF with a button click
Give the image a class that hides it initially, then use a click handler to reveal it and a timer to hide it again. This example uses a fixed delay of 2.5 seconds, within the requested two-to-three-second range.
<button type="button" class="show-gif">Summon a Pokémon</button>
<div class="gif-overlay">
<img src="pokemon.gif" alt="A Pokémon appearing">
</div>
<style>
.gif-overlay {
display: none;
position: fixed;
inset: 0;
align-items: center;
justify-content: center;
background: rgb(0 0 0 / 45%);
}
.gif-overlay.is-visible {
display: flex;
}
.gif-overlay img {
max-width: 90vw;
max-height: 90vh;
}
</style>
<script>
const button = document.querySelector('.show-gif');
const overlay = document.querySelector('.gif-overlay');
let hideTimer;
button.addEventListener('click', () => {
clearTimeout(hideTimer); // Restart the display period on each click.
overlay.classList.add('is-visible');
hideTimer = setTimeout(() => {
overlay.classList.remove('is-visible');
}, 2500);
});
</script>Replace pokemon.gif with the path to your GIF. The overlay uses fixed positioning and flex alignment to place the image in the viewport center. Remove the background declaration if you want the GIF to appear without a darkened backdrop.
What the timer does—and does not do
setTimeout(callback, delay) schedules a callback after a delay measured in milliseconds. Use 2000 for two seconds or 3000 for three seconds. The callback runs asynchronously: the browser continues running other code, and the callback may execute later than requested if the page is busy. MDN’s setTimeout reference explains the timing behavior.
#1 Best Overall
The example stores the timer ID and calls clearTimeout before starting a new timer. That makes each click restart the full 2.5-second display period. If you want the first click’s timer to keep running instead, omit clearTimeout(hideTimer); the original SitePoint discussion does not prescribe a policy for repeated clicks.
Use the same behavior for several buttons
Give every trigger the same class and attach the handler to all matching buttons. Keep one shared overlay if every button should show the same GIF:
Rank #2
<button type="button" class="show-gif">Show GIF 1</button>
<button type="button" class="show-gif">Show GIF 2</button>
<button type="button" class="show-gif">Show GIF 3</button>
<script>
const overlay = document.querySelector('.gif-overlay');
let hideTimer;
document.querySelectorAll('.show-gif').forEach((button) => {
button.addEventListener('click', () => {
clearTimeout(hideTimer);
overlay.classList.add('is-visible');
hideTimer = setTimeout(() => {
overlay.classList.remove('is-visible');
}, 2500);
});
});
</script>A class can be shared by many elements; an ID is intended to identify one element. Do not copy the same ID onto five or six buttons. Use a real <button> rather than a clickable <div>, so the control has button semantics and built-in interaction behavior. See MDN’s button element reference.
How this relates to the SitePoint example
The original SitePoint thread, posted June 28–30, 2014, uses jQuery effects such as fadeIn and fadeOut alongside setTimeout. Its sample passes 1000 as the timeout delay, which requests one second—not the two to three seconds in the reader’s question. The plain JavaScript example above is an updated implementation of the same show-then-hide interaction, not a reproduction of the thread’s jQuery code. Read the SitePoint discussion.
If you already use jQuery, its effects can perform the reveal and hide; otherwise, adding jQuery solely for this interaction is unnecessary. This fixed-delay approach hides the image after the chosen time. It does not detect whether the GIF’s animation has finished: a GIF can loop or have a duration different from the timer, so a fixed timer is not equivalent to “hide when the animation ends.”
Quick Recap
Rank #4
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
