Q&A
前提・実現したいこと
ログイン画面に遷移する時にフェードインさせたいです。
JSがうまく反映できていない状態のようで、CSSのdisplay: none;で、画面が表示されない状態となっています。
エラー画像はこちらです。
以下のように記述しているのですが間違っていますでしょうか？
よろしくお願い致します。
css
1body{ 2 display: none; 3}
javascript
1window.addEventListener('DOMContentLoaded', function(){ 2 $('body').fadeIn(1000); //1秒かけてフェードイン 3});
###追記 jQuery再設定後エラーは消えましたがフェードインされません。
console上でのエラーは消えましたが、症状は依然とdisplay: none;のため、表示されない状態です。
以下にコードを記載しました。どこか間違っておりますでしょうか？
よろしくお願い致します。
app/javascript/packs/application.jsに以下を記述
applicationjs
1//= require jquery 2//= require jquery_ujs 3//= require("turbolinks").start() 4//= require_tree . 5//= require activestorage 6//= require("../session_page")
css
1body{ 2 display: none; 3}
app/views/layouts/application.html.erbの確認
html
1 <head> 2//中略 3 <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css"> 4 <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> 5 <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> 6 7 </head> 8 <body> 9 <%= yield %> 10 </body>
app/javascript/session_page.jsに以下を記述
window.addEventListener('DOMContentLoaded', function(){ $('body').fadeIn(1000); //1秒かけてフェードイン });
jQuery再設定後のコンソール
回答1件
0
jQueryはしっかり読み込まれていますか？
スクリーンショット2行目に赤波線とバツマークがついているので、「$関数」が存在しないエラーになっている気がしますね。
カーソルを合わせたら説明が出ると思うので見てみてください。
投稿2020/10/06 16:27
総合スコア2534
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/10/07 01:12