### 前提こちらの記事を真似しています。 https://coco-factory.jp/ugokuweb/animatecss/ jquery.inviewとanimate.cssを使っています。 Hello, worldがちゃんと起動するのでインストールはしっかりできています。 ### 実現したいこと４つのboxが画面に入ったときにopacityを１=second-inviewクラスを消してopacity１になるようにしたいです。現状 ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-10-08/e0c360cb-398c-43c6-8fca-2dce0959893f.jpeg) ### 発生している問題・エラーメッセージ boxが何も変化しません... ### 該当のソースコード ```html

Hello, world!!

hi

　 ``` ```css * { margin: 0; padding: 0; } /* NAVBAR */ nav { /* background-color: #FF5D5D; */ background-color: #F0662B; /* background: linear-gradient(#FF5D5D, #FFE3A9); */ } /* 文字 */ nav a { color: #fff; padding-left: 20px; } .container-fluid { padding: 0; } .navbar-collapse { } /* 文字 */ .navbar-nav { /* background-color: #FFE3A9; これあるとlaptop幅でダサくなる*/ padding-left: 25px; } .nav-link { color: #fff; } .navbar-toggler { position: relative; width: 60px; height: 50px; /* border: 5px solid #444; */ box-sizing: border-box; border-color: rgba(0,0,0,0); margin-right: 10px; border-color: #fff; } .collapsed { border-color: #fff; } .navbar-toggler-icon { display: block; width: 30px; height: 3px; border-radius: 30px; color: #fff; position: absolute; left: 14px; transition: all 0.5s ease; } .bar1 { /* top: 6.25px; */ top: 8px; background-color:#fff; } .bar2 { top: 17.5px; top: 20px; background-color:#fff; } .bar3 { /* bottom: 6.25px; */ bottom: 12px; /* bottom: 20px; */ background-color:#fff; } /* HEADER */ header { margin-top: 60px; height: 500px; background-color: #FFE3A9; text-align: center; position: relative; } /* 外では見えなくする */ .inview { opacity: 0; } header h2{ padding-top: 50vh; } /* MAIN HEADER */ .row-item1, .row-item2, .row-item3, .row-item4 { width: 100px; height: 100px; position: absolute; } .row-item1 { background-color: blue; top: 0px; left: 0px; } .row-item2 { background-color: purple; top: 100px; left: 200px; } .row-item3 { background-color: red; top: 200px; left: 400px; } .row-item4 { background-color: grey; top: 300px; left: 600px; } /* 最初は見えない */ .second-inview { opacity: 0.2; } /* MAIN */ main { height: 100vh; } ``` ```JavaScript // whenとdoneを使ってみたい // $(function() { // $.when( $(function firstAnimation() { $('.inview').on('inview', function (event, isInview) { if(isInview) { $(this).removeClass('inview'); $(this).addClass('animate__animated animate__swing animate__delay-3s animate__infinite'); } else { $(this).removeClass('animate__animated animate__swing animate__delay-3s animate__infinite'); // ???? $(this).addClass(inview); } }); }) // ) .done(function() { // $(this).addClass(second-inview); // }) // }) $(function() { $('.second-inview').on('inview', function(event, isInview) { if(isInview) { $(this).removeClass(second-inview); } else { $(this).addClass(second-inview); } }) }); ```

質問編集履歴