jQueryであるイベントの終了後、初期状態に戻したい

前提・実現したいこと

jQueryで1の画像をクリックしたら2の画像(ループしない1回だけのGIFアニメ)に切り替え、その後1の画像に自動で戻す。ということをやりたいです。
戻したら、初期状態といいますか、またクリックで2の画像に
切り替えられるようにしたいです。

イメージとしては
1の画像は空のコップの絵、
2の画像は空のコップに水が注がれ満杯の状態の絵で静止。
そのままではコンテンツの内容上困るので空のコップの絵に戻したい。
といった感じです。
※あくまで例で、実際はコップの絵ではありません。

2のGIFアニメーションの再生が終わったら
1の画像に戻る。という見た目になればどういう方法でもよいです。

該当のソースコード

html
1<html>
2<head>
3<script src="./jquery-3.2.1.min.js"></script>
4<script src="./test.js"></script>
5</head>
6<body>
7<img id="changeImg" src="01.gif">
8</body>
9</html>

jquery
1$(function(){
2
3$('#changeImg').click(function() {
4$(this).attr({'src': '02.gif'});
5});
6
7});

試したこと

1の画像を2の画像に切り替えるところまで。
setTimeoutやwhen&doneなど試してみましたが、
初心者なのでよくわかりませんでした。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答2件

ベストアンサー

ご回答ありがとうございました。
最後のタイマーで１の画像を表示させるところが動作せず、調べておりましたら
setTimeout内で$(this)を使用するときには注意が必要のようで
いくつか方法があるようですが、私のレベルではまだ理解できませんので
thisは使わず直接指定する方法で解決とさせていただきました。

ご協力誠にありがとうございました。

＜情報元＞
https://chaika.hatenablog.com/entry/2017/03/31/083000

$(function(){

$('#changeImg').click(function() {
$(this).attr({'src': '02.gif'});

setTimeout(function() {
$('#changeImg').attr({'src': '01.gif'});
}, 5000);
});

});

投稿2018/10/07 12:03

退会済みユーザー

総合スコア0

質問文の認識誤りであったため下記コードを修正しました。
失礼しました。

javascript
1$(function(){
2
3$('#changeImg').click(function() {
4　$(this).attr({'src': '02.gif'}); // changeImgクリック後に02.gifに置き換え
5  // 02.gifに切り替えた後、指定秒数経過で 01.gifに切り替え
6  setTimeout(function() {
7    $(this).attr({'src': '01.gif'});
8  }, 1000); // 1000の値は02.gif(GIF画像)の再生時間をミリ秒で指定する
9});
10
11});

単一画像であれば上記コードで対応可能と思われます。
setTimeoutの第２引数に02.gifのアニメーションの再生時間をミリ秒で指定してください。

投稿2018/10/07 04:34

編集2018/10/07 07:49

Lazy-player

総合スコア77

退会済みユーザー

2018/10/07 05:49

ご回答ありがとうございます。まずは時間指定以外コピペでやってみたのですがファーストビューから変化が見られませんでした。説明がわかりずらかったかもしれません。 (1) 01.gif 　が最初の表示 (2) 02.gif　がクリックされた後の表示（GIFアニメ） (3) 01.gif　が時間指定などで最後に表示される画像（ (1)に戻る）ご負担にならないようでしたら引き続きご回答よろしくお願いします。