Show a gif on button click then hide it

JavaScript
1

Hello.
I want to make that when an user clicks on a button, like to summon a pokemon, it will show in the middle of a screen a .gif, then hide it.
For example:

Button: Change pokemon!
will show this gif: http://static.tumblr.com/46cb5b1d63cf84148220815beac16919/sqjwi15/uQCn06vx6/tumblr_static_tumblr_mmff7iuxxv1qhd8sao1_500.gif for 2-3 seconds(until the gif over) then close the gif window.

Is there any way to do it?

2

Hi,

There sure is :slight_smile:
Include the gif on your page and hide it by default.

Then on button click fade it in and center it using this handy function:

jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + $(window).scrollTop()) + "px");
    this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + $(window).scrollLeft()) + "px");
    return this;
}

$(element).center();

Then use setTimeout to fade it back out again after the desired amount of time has elapsed.

3

Sorry but I am not familiar much with JS and I need more exact information.
How do I use this function?
like onclick=“jquery.fn.center()” ?
and where do I put the setTimeout?

4

Can you post what code you have?

5

It’s a very big file, most of it is PHP
For example I have this function
$(“div[id=‘change_player’]”).ready(function() {
and I want to show an animation for 2-3 seconds in the middle of the screen like the animation above, then hide it
<div id=“change_player”

6

Ok, well let’s make a smaller example and use that to learn from.

Can you make an HMTL page with the aforementioned button and gif image in it, then post the code here.

7

<html>
<head>
</head>
<body>
<div id=“change_player”>my button - Click here</div>
<img src=“myimage.gif” style=“display:none”>
</body>
</html>

8

Fair enough.

One point to bear in mind is that you shouldn’t use divs as buttons.
For one thing a div has little or no semantic meaning. It also doesn’t support the tabindex attribute, which puts keyboard users at a disadvantage.
You can read more here, if you’re interested: http://www.karlgroves.com/2013/05/14/links-are-not-buttons-neither-are-divs-and-spans/

OK, so first thing to do is to include the jQuery library.
This is not strictly necessary (you could of course do all of this in plain JavaScript), but it will make our lives somewhat easier.
We do this at the bottom of the page, just before the closing </body> tag.
We can also add the center() function.
And, while we’re at it, let’s give the image a class of “hidden” and define that rule in the correct place:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <style>
      .hidden{
        display: none;
      }
    </style>
  </head>
  <body>
    <button id="summonPokemon">Change pokemon!</div>
    <img src="http://static.tumblr.com/46cb5b1d63cf84148220815beac16919/sqjwi15/uQCn06vx6/tumblr_static_tumblr_mmff7iuxxv1qhd8sao1_500.gif" class="hidden" id="pokemon">

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
      $.fn.center = function () {
        this.css("position","absolute");
        this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + $(window).scrollTop()) + "px");
        this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + $(window).scrollLeft()) + "px");
        return this;
      }
    </script>
  </body>
</html>

Now, the next thing to do, is to attach an event handler to the button, which deals with displaying the image:

$("#summonPokemon").on("click", function(){
  // Code here will be executed when the button is clicked
});

When clicked we need to display the image and center it:

$("#pokemon").fadeIn().center();

Then after x seconds, fade it back out. This is where setTimeout comes in:

setTimeout(function(){
  // Code here will execute after x milliseconds
}, x);

which gives us:

setTimeout(function(){
  $("#pokemon").fadeOut()
}, 1000);

Complete code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <style>
      .hidden{
        display: none;
      }
    </style>
  </head>
  <body>
    <button id="summonPokemon">Change pokemon!</div>
    <img src="http://static.tumblr.com/46cb5b1d63cf84148220815beac16919/sqjwi15/uQCn06vx6/tumblr_static_tumblr_mmff7iuxxv1qhd8sao1_500.gif" class="hidden" id="pokemon">

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
      $.fn.center = function () {
        this.css("position","absolute");
        this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + $(window).scrollTop()) + "px");
        this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + $(window).scrollLeft()) + "px");
        return this;
      }

      $("#summonPokemon").on("click", function(){
        $("#pokemon").fadeIn().center();
        setTimeout(function(){
          $("#pokemon").fadeOut()
        }, 1000);
      });
    </script>
  </body>
</html>

HTH

9

Thank you very much! It’s awesome! But there is any way to make this animation appear on more than 1 button for the same function?
I mean, if I’ll use this code and I will have 5-6 buttons with the same ID that shows this animation, it will not work / work only for one.
I need it to work for all

10

Hi,

No problem :slight_smile:

To have it work for more than one button, use class names instead of an id.

Then you can do:

$(".summonPokemon").on("click", function(){
  // Code will be run when any button with the class summonPokemon is clicked
});