ページが読み込まれたときに１行目と２行目を時間差でフェードインしたいです。

Question

前提・実現したいこと

Ruby on Railsでwebアプリを作っています。

■■な機能を実装中に以下のエラーメッセージが発生しました。

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

発火しません。
文字が消えたままです。

該当のソースコード

<div class="container">
    <div class="row">
      <div class="mx-auto">
        <ul>
          <li id="js-fadeIn white"><h1>welcome to <strong>RELEASE</strong> !</h1></li>
          <li id="js-fadeIn white">ここはあなたのためだけのコミュニティです!</li>
        </ul>
       </div>
    </div>
</div>

li{
  opacity: 0;
}
li.show{
  transition-duration: 0.5s;
  opacity: 1;
}

function fadeIn(){
    $('.js-fadeIn').each(function(i){
        let delay = 100;  // 0.1秒ずつずれます。好きな秒数に調整してください。
        $(this).delay(i * delay).queue(function(next){
            $(this).addClass('show');
            next();
        });
    })
};

試したこと

https://www.wetch.co.jp/%E3%80%90jquery%E3%80%91%E8%A6%81%E7%B4%A0%E3%82%92%E6%99%82%E9%96%93%E5%B7%AE%E3%83%95%E3%82%A7%E3%83%BC%E3%83%89%E3%82%A4%E3%83%B3/
このサイトを参考にしました。

補足情報（FW/ツールのバージョンなど）

rails version 5.2.6

Comments

[kokitail]

エラーの内容がわからないですよ

Answer 1

idを2つ設定してしまってますね

jsを見る感じだとjs-fadeInはクラスにすべきですかね

Comments

[morfonica]

idからclass変更しましたが変わりませんでした...

[kokitail]

そしたら確認したいこととしてはあと2点あります

* そもそもこのjsファイルが読み込まれているか（console.logなどで確認してください）
* 定義した関数をどこで使っているか（どこかでfadeInを呼び出す必要があります。今はたぶん定義しているだけ）

[morfonica]

$(function() {

// 一旦hide()で隠してフェードインさせる
$('div').hide().fadeIn('slow');

});

[morfonica]

ただフェードインさせるだけならできたのですが、時間差をつけようとするとうまくいきませんでした。

[kokitail]

そもそも0.1秒を見分けられてますか？

時間を変えても同じでしょうか？

あと、fadeInに渡すプロパティ（show）は不要かと思います

[morfonica]

はい
文字が出てこないです。

[kokitail]

いま最終的に修正したとこまでの内容で、質問欄のソースコードに反映してもらっていいですか？