初心者(自分)が書いたjQueryのソースをきれいにしたい。

アニメーションGIFをWEBページで表示させる際に動画埋め込み再生風のデザインで実装したいと考えています。
静止画の上に配置した、なんちゃってPNG再生ボタンを押すとYouTubeのようにアニメーションGIFが再生し、再生終了後は元に戻ります。4秒ほどしかないので停止ボタンはありません。

一応見た目は実現したのですが、jsのソースがたぶん汚いです。
cssとHTMLはなるべく追加変更せずにjsのみでもう少しスマートに書けそうなところが
ありましたらご指南お願いいたします。

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

<!DOCTYPE html>
<html lang="ja">
<head>
<title></title>
<link href="./base.css" rel="stylesheet">
<script src="./jquery-3.2.1.min.js"></script>
<script src="./test.js"></script>
</head>
<body>

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

</body>
</html>

.relative {
    position: relative;
    width: 600px;
}
.absolute {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.relative.btn-hidden #btnImg {
  display: none; 
}

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

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

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

 var $outer = $('.relative');

  $("#btnImg").on('click', function() {
    $("#changeImg").attr({ src: "02.gif" });
    $outer.addClass('btn-hidden');
    $(this).css("cursor", "auto");


    setTimeout(function() {
      $("#changeImg").attr({ src: "01.jpg" });
      $("#btnImg").attr({ src: "03.png" });
      $("#btnImg").css({ opacity: ".65" });
      $outer.removeClass('btn-hidden');
      $("#btnImg").css("cursor", "pointer");
    }, 5000);

  });
});