Q&A
前提・実現したいこと
jQueryのプラグインであるinviewを実装したい。
発生している問題・エラーメッセージ
inviewの記法が間違っているのか、jQueryが間違っているのかわかりません。
該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="ja" dir="ltr"> 3 <head> 4 <meta charset="utf-8"> 5 <title>例</title> 6 <link rel="stylesheet" href="style.css"> 7 </head> 8 <body> 9 10 <p class="fade">これは例です</p> 11 12 <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> 13 <script type="text/javascript" src="script.js"></script> 14 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inview/1.0.0/jquery.inview.min.js"></script> 15 </body> 16</html>
css
1.fade{ 2 font-size: 50px; 3 background-color: green; 4 opacity: 0; 5 transition: 2s; 6} 7 8.fade-in{ 9 opacity: 1; 10} 11
js
1$('.fade').on('inview', function(event, isInView) { 2 if (isInView) { 3 $(this).addClass('.fade-in'); 4 } 5 });
補足情報（FW/ツールのバージョンなど）
回答2件
0
jQueryのプラグインinviewはjQuery3をサポートしていないようです。
これからはIntersection Observerを使うことをお勧めします。
jQueryに依存しない上、jQueryでスクロールイベントを使うよりブラウザの負担も少なくてスムーズに動きますよ。
投稿2021/12/01 14:39
総合スコア1907
0
ベストアンサー
気になる点だけ
- CDNのソース見た感じ、かなり古いものに見受けられますが、その点は問題ないでしょうか
つまり、プラグインのドキュメント？ではjQuery1.3↑と書かれていますが、質問者さんが利用しようとしているjQuery3.4.1で動くのかと言う懸念（日本語記事の紹介サイトでは1.11を採用しているものも見ました）
→失礼 3.6採用の記事もありました
- jQueryプラグインの利用方法は下記の順序で書くのが基本です。提示のコードは2と3が逆になってませんか？
- jQuery本体
- jQueryプラグイン本体
- プラグイン呼び出し
- 「inview」だけで検索しても結構紹介記事は出てくるので、自身がやりたいことはともかく紹介記事の通りの内容で幾つか試してみては？
投稿2021/12/01 13:24
編集2021/12/01 13:31
総合スコア80861
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。