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再生中はクリックしても何も起こらないが、
再生後は見た目上順番１に戻り、
再生ボタンが再びクリックできるようにしたいです。