画面領域に入ったときに、隠れていたdiv要素がスライドして表示される動作を作りたいのですが、画面領域に入っても動作しません。jqueryのコードを書くところにevent,thisがanyと表示されます。
コード ```<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>BBB英会話スクール</title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css"> <meta name="vieWport" content="width=device-width,initial-scale=1"> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <script src="js/jquery.inview.min.js"></script> <script src="js/jquery.js"></script> </head> <body> <div class="online inview fadeIn-left"> <img src="img/img06.png" alt="オンライン対応"> <div class="onlien-text"> <h3>オンライン対応</h3> <p>24時間いつでも受講できる!</p> </div> </div> </body> css .online{ display: flex; justify-content: center; align-items: center; width: 635px; height: 200px; background-color: white; border-top-right-radius: 15px; border-bottom-right-radius: 15px; } h3{ font-size: 25px; color: #FF3939; } .online p{ font-size: 15px; } .online img{ width: 85px; height: 60px; margin-right: 35px; } .fadeIn-left{ opacity: 0; transform: translate(-100%, 0); transition: .7s; } .is-show{ transform: translate(0, 0); opacity: 1; } jQuery $(function(){ $('.inview').on('inview' ,function(event,isInView){ if(isInView){ $(this).stop().addClass('is-show'); }else{ $(this).stop().removeClass('is-show'); } }); });
回答1件
あなたの回答
tips
プレビュー