Java ScriptのsetTimeoutの処理について

前提・実現したいこと

java scriptでsetTimeoutを使って要素のopacityを増減していのですが該当箇所がうまく動きません。
助言の方よろしくおねがいします。

発生している問題・エラーメッセージ

opacityの数値が増減せず処理だけが繰り返される。

該当のソースコード

html
1<div class="page1" id="page1">
2    <img src="/images/publicdomainq-0053249agt.jpg" alt="" id="page1img">
3     <div id="search"><span id="typewrite"></span><button onclick="hiden()">Search</button></div>
4     <h1 id="teach">answer</h1>
5     </div>

javascript
1let search = document.getElementById('search');
2search.style.opacity = 1;
3        const hiden = ()=>{
4            search.style.opacity -= 0.1;    //要素のopacityに0.1ずつ引いてfadeOut
5            const timer = setTimeout(hiden,50);
6            console.log(search.style.opacity);
7            if(search.style.opacity == 0){
8                clearTimeout(timer);
9                bgShow();    //下記関数の呼び出し
10            }
11        }
12//ここはうまく動いてopacityを変更できていますが、
13
14let page1Bg = document.getElementById('page1img');
15        page1Bg.style.opacity = 0;
16        const bgShow = ()=>{
17            page1Bg.style.opacity += 0.1;
18            const timer3 = setTimeout(bgShow,500);
19            console.log(page1Bg.style.opacity);
20            if(page1Bg.style.opacity == 1){
21                clearTimeout(timer3);
22            }
23        }
24//呼び出したこの関数の処理がうまく行かず、console.logには延々と0.1と表示され続けます。