Q&A
何が起きてるのでしょう。
https://teratail.com/help/question-tips#questionTips34
jQueryを使ってfadeInさせたいのですが、fadeInできず困っています。わたしでは、原因がわからなくて対処ができず。
一番下の画像のように、なにも表示されず空白になっています。
上下にスライドしても、なにも反応せず。
ネットで調べても、なにが原因なのかわからず。
助けていただけたら、幸いです。
html
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="utf-8"> 6 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.css"> 7 <link rel="stylesheet" href="./css/style.css"> 8 9<body> 10 <section class="tokushoku"> 11 <div class="tokushoku-t"> 12 <h1>Kira-Kira English</h1> 13 <h1>3つの特色</h1> 14 <span class="boo"></span> 15 </div> 16 <div class="tokushoku1"> 17 <div class="box1 animated"></div> 18 <h1>01.</h1> 19 <p>「聞く・話す・読む・書く」の夢中になっている間に「わかる」から「できる」に！</p> 20 </div> 21 22 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> 23 <script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js" integrity="sha512-CEiA+78TpP9KAIPzqBvxUv8hy41jyI3f2uHi7DGp/Y/Ka973qgSdybNegWFciqh6GrN2UePx2KkflnQUbUhNIA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> 24 <script src="./js/main.js"></script> 25</body> 26 27</html>
css
1.tokushoku{ 2 padding: 80px 16px 80px 16px; 3} 4 5.tokushoku-t{ 6 display: flex; 7 flex-direction: column; 8 align-items: center; 9 row-gap: 10px; 10} 11 12.tokushoku h1{ 13 margin-left: -2px; 14 font-size: 24.2px; 15 font-weight: bold; 16} 17 18.boo{ 19 display: inline-block; 20 width: 24px; 21 height: 2px; 22 background-color: #0079f2; 23 margin-bottom: 32px; 24} 25 26.tokushoku1{ 27 height: 100vh; 28} 29 30.box1{ 31 width: 357px; 32 height: 269px; 33 background-image: url(../images/final-exam-assets/point/point_1.jpg); 34} 35
jquery
1$('.animated').waypoint({ 2 handler: function(direction) { 3 if (direction === 'down') { 4 $(this.element).addClass('fadeInLeft'); 5 } 6 }, 7 offset: '50%', 8});
回答1件
0
ベストアンサー
ひとまずコピペして指定の場所にファイルを配置してやってみました。
左から指定した画像がやってきました。これが想定した動きでしょうか。
であれば、どれかのファイルのパスが合ってないのだと思います。
ブラウザ開発ツールのコンソール確認してください。
（「起きてること」は「コンソールでのエラー」も含みます）
投稿2023/03/05 09:28
編集2023/03/05 09:29総合スコア80850
回答ありがとうございます。
その動きなんです。
ですが、こちらでは空白のまま何も起こらないです。
ファイルパスあってました。
開発ツールのエレメント選択で何かしら動きが分かるかもしれません。
あとどのように「あっていた」確認をされましたか？
ブラウザ開発ツールのコンソール確認してください。
CSSファイルに書かれたパスが違う場合でもERR_FILE_NOT_FOUNDが出ます（Win11のChrome,Firefoxで確認）
開発ツールでリンクたどったら、該当の画像が表示されました。
開発ツールでのエラーなかったです。
fire fox使ってるのですが、chromeで実行しても空白のままでした。
なにが原因なのか・・・
キャッシュですかねぇ。
ただ確認してほしいのは「コンソール」なのですが、提示画像には見えてません。
キャッシュだとしても結局リンクできてないので404になるはずです。
コンソールには何も表示されてないです。
一回パソコンを再起動してみたのですが、変化なかったです。
では、style,scriptを外部ファイルではなくHTMLに直接書いてみてください。
※HTMLに書くと今cssに書いてるファイルパスの相対位置変わるので注意。
画像を変えたり、サイズを小さくしたりというのもありです。
手元で試したのは600KB程度のjpgです。
htmlにstyle直書きしましたが、ダメでした。
ウイルスソフトも一旦停止させましたが、ダメでした。
画像は100kbのjpgです。
私のパソコンは、このjqeryに対応していないのかな・・・
他の方法でするしかないかな・・・
JavaScriptはあくまでブラウザに影響するものなので、PC関係ないです。ブラウザだけ。
対応してないならエラーなりなんなり出るはずです。
試しに、console.log($('body'))
だけで確認してみると良いです。
HTML内に実装した要素である$('.animated')でも良いですけどね。
他の方法でfadeinしたらいけるんですが、どうもwaypointsが動いてない様子です。
動いてない確証も確認できないので、わからないですが。
firefoxは最新110.0.1で対応してるはずなんですが、原因がさっぱりわからず・・・
なんにもしてないのに、急にfadeinし出しました。
さっぱりわからない。
振り回してしまって、ごめんなさい。
相談に乗ってくれて、ありがとうございました。
いえ。キャッシュのような気がしないでもないです。
あなたの回答
tips
プレビュー
