Jquery で複数ボタンを順次点滅させる方法

HTMLのアニメーションを組み込もうとしてJqueryでいくつか調べて実施した内容を紹介します。いくつか調べたのですが、うまい具合に見つからなかったので素人ながら自作しました。

https://techfromjapan.estacionsuzuki.com/
動作イメージは、このサイトヘッダーのボタンの動作になります。
タイマーを設置しているので一定間隔でボタンが点灯していきます。

index.html

(略)
 <script src="./jquery-3.5.1.js"></script>
(略)

<div class="category">
        <div class="icon timer">
            <p>A</p>
        </div>
        <div class="icon timer">
            <p>B</p>
        </div>
        <div class="icon timer">
            <p>C</p>
        </div>
        <div class="icon timer">
            <p>D</p>
        </div>
        <div class="icon timer">
            <p>E</p>
        </div>
        <div class="icon timer">
            <p>F</p>
        </div>
        <div class="icon timer">
            <p>G</p>
        </div>
    </div>


(略)
</footer>
         <script src="./script.js"></script> <!-- ※Jqueryのファイルです -->
</body> 

stylesheet.css

.category{
  width: 100%;
  height:auto;
  margin-top: 5px;
  padding-left: 0%;
  padding-right: 3%;

}



.icon {
    display: inline-block;    
    text-decoration: none;
    color: black;
    background-image: linear-gradient(#FAF0E6 0%, #FF8C00 100%);   
    transition: .4s;
    text-align: center;
    margin: 0 1px;
    padding:auto;
    width:13%;
    height:50px;    
}

.icon:hover {
  opacity: 0.5;
}

script.js

// jQuery
$(function(){


//カテゴリボタンを点滅させるアニメーション
        //（１）ページの概念・初期ページを設定
        var page=0;

        //（２）イメージの数を最後のページ数として変数化
        var lastPage =parseInt($(".timer").length-1);

        //（３）初期ページを表示
                  $(".timer").eq(page).css("opacity","0.5");

        //（４）ページ切換用
        function changePage(){
                                 $(".timer").css("opacity","1");
                                 $(".timer").eq(page).css("opacity","0.5");
        };
        //（５）～秒間隔でイメージ切換の発火設定
        var Timer;
        function startTimer(){
                Timer =setInterval(function(){
                      if(page === lastPage){
                                     page = 0;
                                     changePage();
                           }else{
                                     page ++;
                                     changePage();
                      };
                 },3000);
        }
        //（６）～秒間隔でイメージ切換の停止設定
            function stopTimer(){
                clearInterval(Timer);
            }
        //（７）タイマースタート
        startTimer();

// トップページカテゴリのclickイベント
      $('.icon').click(function(){
          // 自動アニメーションの停止

          $('.timer').css('opacity', '');
          stopTimer();
      });

  });