画面遷移の際ローディングを表示したいです

railsでjQueryのfeadOutを用いて画面遷移時にローディングを表示したいです。

###開発環境
Ruby on Rails 6.0.0
jQuery 3.6.0

発生している問題

「動くWebデザインアイディア帳」を参考にローディング-ロゴアニメーション-を実装しようと開発を進めていましたが、jQueryのfeadOutが作動せず、ローディングがフェードアウトせずローディングの画面で止まってしまいます。

実際の挙動です

試したこと

railsにjQueryの導入

#Gemfile
gem 'jquery-rails'

#ターミナル
bundle install

ローディングの挙動の記述

#splash.js
$(window).on('load',function(){
  $("#splash").delay(1500).fadeOut('slow');//ローディング画面を1.5秒（1500ms）待機してからフェードアウト
  $("#splash_logo").delay(1200).fadeOut('slow');//ロゴを1.2秒（1200ms）待機してからフェードアウト
});
#application.js
require('jquery')
#application.html
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="/javascript/splash.js"></script>
</body>
#index.html
<div id="splash">
  <div id="splash_logo">
    <img src="adrienguh-cz0jWE_mGlA-unsplash.jpg" alt="no-image" class="fadeUp">
  </div>
</div>
<div id="splash-container">
ローディング後に表示したい内容を記述します
</div>

###実装したい挙動
私が想定している挙動はローディングで背景、ロゴ画像を表示（現在はno-imageとなっています）した後、ロゴ画像→背景の順番でフェードアウトする挙動を想定しております

###結果
ローディングで表示したいcssは表示されるものの、フェードアウトしない現状です。初めてjQueryを扱ったため、解決方法がイメージできません。他に記述すべきこと、確認することがございましたら、教えていただけると幸いです。よろしくお願いします

yambejp

2021/11/10 03:50

#splash_logoが#splashに含まれていて何をどうしたいか不明確です #splashをフェードアウトしたあとに#splash_logoをフェードアウトというのは合理的ではないと思いますが？

sumimasa

2021/11/10 05:10

ご回答いただきありがとうございます。質問内容を訂正します。実装したい挙動としては、現在は「no-image」となっておりますが、「no-image」の部分にロゴ画像を挿入する予定で、ロゴ画像をフェードアウトした後に背景をフェードアウトさせる挙動を想定しております。

yambejp

2021/11/10 05:14 編集

ごめんなさい、説明がわかりません #splashに#splash_logoがネストしているのが問題だと指摘しているのですが？外側がfadeoutしたあとに内側がfadeoutする意味がわからないということ私の理解が間違っていますか？

sumimasa

2021/11/10 05:27

申し訳ありません。初めてjQueryを扱うので記述が間違っているかもしれません。フェードアウトに時間差を付けているので、#splash_logoがフェードアウトした後に、#splashがフェードアウトする挙動にならないかと考えこのように記述しました。説明が下手くそで申し訳ありません。

yambejp

2021/11/10 05:32

内側が先にフェードアウトして、つづいて外側がフェードアウトするのですね？ソースの指示が逆にみえます

sumimasa

2021/11/10 05:34

つまり、こう言うことでしょうか？ $(window).on('load',function(){ $("splash_logo").delay(1200).fadeOut('slow');//ロゴを1.2秒（1200ms）待機してからフェードアウト $("splash").delay(1500).fadeOut('slow');//ローディング画面を1.5秒（1500ms）待機してからフェードアウト });

行動規範の内容に同意します

回答1件

ベストアンサー

流れ的には命題の通りで問題ないと思いますが・・

javascript
1<script>
2$(function(){
3  $('#splash').delay(1500).fadeOut();
4  $('#splash_logo').delay(1200).fadeOut();
5});
6</script>
7<style>
8#splash{height:100px;width:80%;background-Color:yellow;position:relative;}
9#splash_logo{height:50px;width:50%;background-Color:lime;position:absolute;top:25%;left:15%;}
10</style>
11<div id="splash">
12<div id="splash_logo">
13test
14</div>
15</div>