質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.59%

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,403
退会済みユーザー

退会済みユーザー

アニメーション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秒)が過ぎると
1の静止画にボタンが乗っている状態に戻ります。

見にくくてすみません。
初心者で処理ごとに書かないと頭が混乱するので
セレクタの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再生中はクリックしても何も起こらないが、
再生後は見た目上順番1に戻り、
再生ボタンが再びクリックできるようにしたいです。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2018/11/12 12:47

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

    キャンセル

  • m.ts10806

    2018/11/12 18:22

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

    キャンセル

回答 2

checkベストアンサー

+1

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

  1. 実際の画像がないので、ダミー画像にしています。
  2. ボタンにホバーした際のスタイルはCSSに写しました
  3. 元々のCSSがないので、各要素の幅や高さなどのスタイルは仮のものにしています。
<div class="relative">
  <img id="changeImg" data-gif="https://dummyimage.com/200x200/ff0000/fff.gif&text=GIF" src="https://dummyimage.com/200x200/000/fff.jpg&text=静止画">
  <img id="btnImg" class="absolute" src="https://dummyimage.com/100x100/0011ff/fff.png&text=ボタン">
</div>
.relative {
  position: relative;
  width: 200px;
  margin: 0 auto;
}
#changeImg {
  height: 200px;
}
#btnImg {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  margin: -50px 0 0 -50px;
  opacity: 0.65;
  cursor: pointer;
  transition: opacity 400ms;
}
#btnImg:hover {
  opacity: 1;
}
.relative.btn-hidden #btnImg {
  display: none; 
}
$(function() {
    // 各要素を取得
    var $outer = $('.relative');
    var $img = $('#changeImg');
    var $btn = $('#btnImg');

    // ボタンをクリックした場合の処理を設定
    $btn.on('click', function() {
        // 静止画のURLを取得(あとで戻せるように)
        var jpgSrc = $img.attr('src');

        // GIFのURLをdata属性から取得
        var gifSrc = $img.data('gif');

        // 静止画をGIFに差し替え
        $img.attr('src', gifSrc);

        // ボタンを非表示に(クリックできなくする)
        $outer.addClass('btn-hidden');

        // 5秒後に初期表示に戻るように
        setTimeout(function() {
            // GIFを静止画に差し替え
            $img.attr('src', jpgSrc);

            // ボタンを表示
            $outer.removeClass('btn-hidden');    
        }, 5000);
    });
});

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/11/12 20:04

    ご回答ありがとうございます。
    実現したいことはまさにこの通りです!
    まずはお礼まで。

    (コピペで動かしましたが初心者ゆえ内容の理解が追いついていません。。)

    キャンセル

  • 2018/11/12 20:22 編集

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

    キャンセル

0

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

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

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

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

  $("#btnImg").click(function() {
    $("#changeImg").attr({ src: "02.gif" });
    $("#btnImg").removeAttr("src");
    // ★ここでボタンを無効にして
    $("#btnImg").prop("disabled", false);

    setTimeout(function() {
      $("#changeImg").attr({ src: "01.jpg" });
      $("#btnImg").attr({ src: "03.png" });
      $("#btnImg").css({ opacity: ".65" });
      // ★ここでボタンを再度有効にする
      $("#btnImg").prop("disabled", true);
    }, 5000);
  });
});

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/11/12 17:53 編集

    ご回答ありがとうございます。
    残念ながら動作に変化がありませんでした。

    やりたいことの考え方やタイミングはそんな感じです。今回のはフォームのボタン要素ではなく、png画像を再生ボタンに見立てて静止画の上下左右中央に配置した作りとなっています。

    引き続きお知恵をいただけるようでしたら、よろしくお願いします。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.59%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る