Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Fix the driver behind crashes, sound loss and screen glitches3Repair Windows errors before they cause bigger problemsHide the GIF by default, reveal it when a button is clicked, and use a timer to hide it again after 2–3 seconds. For several buttons with the same behavior, give each button a shared class and attach one event handler to that class.
Show and hide a GIF with a button click
This native JavaScript example centers one GIF over the viewport. Add the image and a semantic button to your page:
<button type="button" class="show-gif">Summon Pokémon</button>
<div class="gif-overlay" hidden>
<img src="pokemon.gif" alt="A Pokémon appears">
</div>Then add CSS to center the image and JavaScript to show it temporarily:
.gif-overlay {
position: fixed;
inset: 0;
display: grid;
place-items: center;
background: rgb(0 0 0 / 35%);
z-index: 1000;
}
.gif-overlay[hidden] {
display: none;
}
.gif-overlay img {
max-width: min(90vw, 500px);
max-height: 90vh;
}
const overlay = document.querySelector('.gif-overlay');
let hideTimer;
document.querySelectorAll('.show-gif').forEach((button) => {
button.addEventListener('click', () => {
clearTimeout(hideTimer);
overlay.hidden = false;
hideTimer = setTimeout(() => {
overlay.hidden = true;
}, 2500);
});
});Change pokemon.gif to the path to your image. The timer delay is in milliseconds, so 2500 requests 2.5 seconds; use 2000 or 3000 for two or three seconds. The clearTimeout call makes a new click restart that display period rather than leaving an earlier timer scheduled to hide the image. MDN explains that setTimeout schedules a callback asynchronously; the actual callback may run later than its requested delay, depending on browser conditions.
Recommended Free Tools
#1 Best Overall
Use the same behavior for multiple buttons
The example uses querySelectorAll('.show-gif') to select every button with the show-gif class, then attaches the same click handler to each. Put that class on each button that should show the image:
<button type="button" class="show-gif">Summon Pokémon</button>
<button type="button" class="show-gif">Show another animation</button>Do not give multiple buttons the same ID. IDs are intended to identify a single element; a shared class is the appropriate selector for a group. Use a real <button> rather than a clickable <div>: buttons have built-in control semantics and keyboard behavior. MDN documents the button element.
Rank #2
How the older jQuery approach relates
The 2014 SitePoint forum thread used jQuery effects such as fadeIn and fadeOut, with a timeout to hide the image. Its sample used jQuery 1.9.1; that is a historical example, not a reason to load that old version for a new page. The discussion also notes that jQuery is optional. The native code above performs the same basic reveal-and-hide interaction without that library. Read the original SitePoint discussion.
Fixed display time or wait for the GIF to finish?
The timer approach hides the image after the duration you choose, whether or not the animation has reached its final frame. It is suitable when a brief, predictable display is the goal. If the image must remain visible until its animation genuinely finishes, a fixed timeout is not the same thing as detecting animation completion; the cited forum example does not establish an animation-end method.
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.
