jQueryのsetIntervalが動作しない

Question

ポートフォリオサイトの製作中です。長時間調べても解決できない問題が発生しました。
サイトを開いた瞬間からangleアイコンをjQueryで繰り返しフェードインをさせようと以下のようにしましたが無反応で動作しません。どなたかご教授お願いします。jQueryのバージョンは3.5.1です。公式サイトからダウンロードしてファイルに入れて読み込んでます。

(function($) {
    $(function() {
        let $element = $("#fadeInIcon");
        setInterval(function() {
            $element.fadeIn(500);
        }, 1000);
    });    
})(jQuery);

※jQueryのファイル名はrepeat_jquery.js。

〜省略〜
<span class="fas fa-angle-down" id="fadeInIcon"></span>
〜省略〜
</footer>
<!--jQuery(3.5.1)の読み込み-->
<script src="./_common/scripts/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="./repeat_jquery.js"></script>
</body>
</html>

※HTMLは前後割愛。

Comments

[miyabi_pudding]

setInterval(function() {
の中で、console.logなどで、中を通っているかは確認しましたか？

[cerfweb]

「無反応で動作しない」というのは、まったく現れないという意味ですか、現れたり消えたりしないという意味ですか。

[toyo_69]

大変分かりづらい表現をしておりました。失礼いたしました。
setIntervalの中でwindow.alertを実行したところ、指定した時間間隔で繰り返しウィンドウアラートが表示されました。なのでやはりsetIntervalが動いてくれていないみたいです。
cerfweb様のご指摘に関しましては、アイコンは表示されているのですが、期待している動作のフェードインをしてくれない、という状況です。

Answer 1

まず、fontawesomeを組み込めてるかどうか確認してみてください。
fontawesomeのcss用のlink要素をhtmlに記述してますか?
ページを開いたときに、angleアイコンは見えてますか?

また、フェイドインさせたいなら、まずはアイコンを非表示にしておかないと、変化が分からないですよね? ページのロード時に、$element.hide()しましょう。

そして、500msecかけてフェイドインしたあとで、また非表示にしたいので、

$element.fadeIn(500, function(){ $(this).hide(); });

って感じでどうでしょうか。

Comments

[toyo_69]

fadeInが対象としている要素が消えている状態でないと目視で確認できないということを知りませんでした。また、gpsoft様の$element.hideだと私の都合上、上にあった要素が落ちてきてしまいガタガタになってしまったので、今回はベストアンサーを他の方に付けさせていただきました。ここまでお付き合いくださり、ありがとうございました。

Answer 2

消していないから消えないということですね。

// setIntervalの中
    $element.fadeIn(500, function(){
        $element.fadeOut(500);
    });

<span class="fas fa-angle-down" id="fadeInIcon" style="display: none;"></span>

とすればいいのではないでしょうか。

Comments

[toyo_69]

HTMLの方を記述してしまうと要素のスペースごと無くなってしまい、こちらの事情ですがサイトを開いた瞬間アイコンの上に乗っかっていた要素が落ちてきてしまったのでHTMLのstyleの変更はせずに実行すると期待通りに動作いたしました。
以前背景画像に対してフェードインさせた時、opacityを使っており背景画像を初めから消してなくてもフェードインできたのでopacityを使ったフェードインとの仕様の違いについて勘違いしておりました。
fadeInは対象の要素が元々消えている状態でなければ実際の変化が目視できず、fadeOutは要素が消えた後は要素自体の大きさも無くなってしまうということを理解することができました。
ここまでお付き合いいただき、ありがとうございました。