画像のロールオーバーについて

Question

javascriptで以下のようなコードで画像をロールオーバーする機能をつくりました。
さらに、ゆっくり切り替わるようにしていくようにしたいのですが、これがうまくいきません。
callback関数をつけたり、transitionでゆっくり切り替えるように試してみたんですが、
なぜかうまくいきません。
どうすれば、ゆっくり切り替えるように出来るのでしょうか？

    <img id="rollOver" src="images/img01_off.jpg" alt="">

    <style>
        img {
            cursor: pointer;
        }
    </style>
    <script>

        function test() {
            var rollOver = document.getElementById("rollOver");
            var suffix = '_off';
            var suffixReplace = '_on';

            rollOver.addEventListener("mouseover", function () {
                setTimeout(function () {
                    rollOver.setAttribute("src", rollOver.getAttribute("src").replace(suffix, suffixReplace));
                    rollOver.style.transition = "all 0.3s ease";
                }, 2000);
            });

            rollOver.addEventListener("mouseout", function () {
                setTimeout(function () {
                    rollOver.setAttribute("src", rollOver.getAttribute("src").replace(suffixReplace, suffix));
                    rollOver.style.transition = "all 0.3s ease";
                }, 2000);
            });
        }
        test();
    </script>

Comments

[m.ts10806]

>なぜかうまくいきません。
どうなれば正解なのか明記してないこともあってこの手の表現は「何が起きてるか」を何も伝えない表現です。起きている現象を記載してください。
https://teratail.com/help/question-tips#questionTips3-4-1

Answer 1

「ゆっくり切り替わる」とは具体的にどのような動作を想定していますか。
前の画像がゆっくり消えていき、次の画像がゆっくり現れる、ということでしょうか。
だとしたら、src の url を切り替えることではないですよね。

前の画像の透明度を上げてゆき、次の画像の透明度をゆっくりと下げてゆくという動作にすればいいでしょう。

これはスクリプトを使わなくても、CSSだけで簡単に実現できます。
２つの画像を重ねて配置しておいて、片方を透明しておく(opacity:0;)、もう一方は(opacity:1;)
マウスホバーで、opacityを入れ変えるようにすればいいでしょう。

Codepenサンプル

Answer 2

ここが参考になるかも？