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="t">11 <div class="to">12 <div class="box animated"></div>13 </div> 14 </section>15 16 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>17 <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>18 <script src="./js/main.js"></script>19</body>20 21</html>
css
1.to{2 height: 100vh;3}4 5.box{6 width: 357px;7 height: 269px;8 background-image: url(../images/final-exam-assets/point/point_1.jpg);9}10 11.animated{12 opacity: 0;13}
jquery
1$('.animated').waypoint({ 2 handler: function(direction) { 3 if (direction === 'down') { 4 $(this.element).addClass('fadeInLeft'); 5 } 6 }, 7 offset: '50%', 8});
0 コメント