jQueryでアニメーションGIF再生中にそのGIFをクリックすると頭から再生されてしまう。

アニメーションGIFをWEBページで表示させる際に
動画埋め込み再生風のデザインで実装したいと考えています。

jQueryを使い、以下の順番で実現したいのですが、一部うまくいきません。

1　静止画（01.jpg）を表示
2　静止画の上下左右中央に再生ボタン(#btnImg、03.png)が配置されています。
3 03.pngのボタンはマウスオーバーで透過状態に変化があったりカーソルが指アイコンになったりします。
4　再生ボタンをクリックするとアニメーションGIF(02.gif)が再生されます。
5 アニメーションGIF再生中はボタン(03.png)が消えます。

このとき、再生中のアニメーションGIF(02.gif)をクリックしてしまうと、
アニメーションが最初から再生されます。
クリックしても無視して再生が終了するようにしたいです。
02.gifそのものはループなしで設定されたアニメーションGIFで、
単体で表示する分には途中でクリックしても頭に戻ることはありません。

6　再生ボタンをクリックしてから指定時間（5秒）が過ぎると
１の静止画にボタンが乗っている状態に戻ります。

見にくくてすみません。
初心者で処理ごとに書かないと頭が混乱するので
セレクタのthisやメソッドチェーンなど、ソースを省略することは
あとでやりたいと思います。

<body>

<div class="relative">
<img id="changeImg" src="01.jpg">
<img id="btnImg" class="absolute" src="03.png">
</div>

</body>

$(function() {
  $("#btnImg").css({ opacity: ".65" });

  $("#btnImg").hover(
    function() {
      $(this)
        .stop()
        .animate({ opacity: "1" });
    },
    function() {
      $(this)
        .stop()
        .animate({ opacity: ".65" });
    }
  );

  $("#btnImg").css("cursor", "pointer");

  $("#btnImg").on('click', function() {
    $("#changeImg").attr({ src: "02.gif" });
    $("#btnImg").removeAttr("src");
    $("#btnImg").css("cursor", "auto");

    setTimeout(function() {
      $("#changeImg").attr({ src: "01.jpg" });
      $("#btnImg").attr({ src: "03.png" });
      $("#btnImg").css({ opacity: ".65" });
    }, 5000);

  });
});
```

clickを制御するものがないからかなと思い、
.on() .off()でできましたが、
これだけだとclickが1回きりになってしまい、クリックイベントの復活のさせ方がわかりません。
アニメーションGIF再生中はクリックしても何も起こらないが、
再生後は見た目上順番１に戻り、
再生ボタンが再びクリックできるようにしたいです。

m.ts10806

2018/11/12 03:47

ソースコードはマークダウンのcode機能を使ってください。質問・解説内容とコードとの境目が不明瞭となりますし、code機能では正しくコードをコピペできるようになりインデントもつけられて読みやすくなり、再現確認も容易となりますので、的確な回答が得やすくなります。https://teratail.com/help#about-markdown

m.ts10806

2018/11/12 09:22

インデントが全くないと不具合も起きやすくなります。適切にインデントつけてください

行動規範の内容に同意します

回答2件

ベストアンサー

以下のかたちでどうでしょう。

実際の画像がないので、ダミー画像にしています。
ボタンにホバーした際のスタイルはCSSに写しました
元々のCSSがないので、各要素の幅や高さなどのスタイルは仮のものにしています。

HTML
1<div class="relative">
2  <img id="changeImg" data-gif="https://dummyimage.com/200x200/ff0000/fff.gif&text=GIF" src="https://dummyimage.com/200x200/000/fff.jpg&text=静止画">
3  <img id="btnImg" class="absolute" src="https://dummyimage.com/100x100/0011ff/fff.png&text=ボタン">
4</div>

CSS
1.relative {
2  position: relative;
3  width: 200px;
4  margin: 0 auto;
5}
6#changeImg {
7  height: 200px;
8}
9#btnImg {
10  position: absolute;
11  top: 50%;
12  left: 50%;
13  display: block;
14  margin: -50px 0 0 -50px;
15  opacity: 0.65;
16  cursor: pointer;
17  transition: opacity 400ms;
18}
19#btnImg:hover {
20  opacity: 1;
21}
22.relative.btn-hidden #btnImg {
23  display: none; 
24}
25

JavaScript
1$(function() {
2    // 各要素を取得
3    var $outer = $('.relative');
4    var $img = $('#changeImg');
5    var $btn = $('#btnImg');
6
7    // ボタンをクリックした場合の処理を設定
8    $btn.on('click', function() {
9        // 静止画のURLを取得(あとで戻せるように)
10        var jpgSrc = $img.attr('src');
11    
12        // GIFのURLをdata属性から取得
13        var gifSrc = $img.data('gif');
14  
15        // 静止画をGIFに差し替え
16        $img.attr('src', gifSrc);
17    
18        // ボタンを非表示に(クリックできなくする)
19        $outer.addClass('btn-hidden');
20    
21        // 5秒後に初期表示に戻るように
22        setTimeout(function() {
23            // GIFを静止画に差し替え
24            $img.attr('src', jpgSrc);
25    
26    	    // ボタンを表示
27            $outer.removeClass('btn-hidden');    
28        }, 5000);
29    });
30});
31

投稿2018/11/12 10:31

編集2018/11/12 10:33

NozomuIkuta

総合スコア1260

退会済みユーザー

2018/11/12 11:04

ご回答ありがとうございます。実現したいことはまさにこの通りです！まずはお礼まで。（コピペで動かしましたが初心者ゆえ内容の理解が追いついていません。。）

NozomuIkuta

2018/11/12 11:22 編集

解決できたみたいで良かったです。元々のコードにないメソッド(data()やaddClass()/removeClass())でも、かなりメジャーなもので、今後開発する上でマストになると思いますので、一度調べてみてください。

行動規範の内容に同意します

推測ですがボタンが無効化されていないからではないでしょうか？
下記の★マークの処理を記述するとどうなるでしょうか？
（分かりにくかったので勝手ながらインデントを付けてます。）

javascript
1$(function() {
2  $("#btnImg").css({ opacity: ".65" });
3
4  $("#btnImg").hover(
5    function() {
6      $(this)
7        .stop()
8        .animate({ opacity: "1" });
9    },
10    function() {
11      $(this)
12        .stop()
13        .animate({ opacity: ".65" });
14    }
15  );
16
17  $("#btnImg").css("cursor", "pointer");
18
19  $("#btnImg").click(function() {
20    $("#changeImg").attr({ src: "02.gif" });
21    $("#btnImg").removeAttr("src");
22    // ★ここでボタンを無効にして
23    $("#btnImg").prop("disabled", false);
24
25    setTimeout(function() {
26      $("#changeImg").attr({ src: "01.jpg" });
27      $("#btnImg").attr({ src: "03.png" });
28      $("#btnImg").css({ opacity: ".65" });
29      // ★ここでボタンを再度有効にする
30      $("#btnImg").prop("disabled", true);
31    }, 5000);
32  });
33});

投稿2018/11/12 05:20

編集2018/11/12 05:22

runny_nose

総合スコア280

退会済みユーザー

2018/11/12 09:42 編集

ご回答ありがとうございます。残念ながら動作に変化がありませんでした。やりたいことの考え方やタイミングはそんな感じです。今回のはフォームのボタン要素ではなく、png画像を再生ボタンに見立てて静止画の上下左右中央に配置した作りとなっています。引き続きお知恵をいただけるようでしたら、よろしくお願いします。

行動規範の内容に同意します

あなたの回答