タブの切り替え時にもフェードインを適用したいです。
現在、以下のようなメニュー表を作成しており、
それぞれ、タブをクリックするとそれぞれのメニューに切り替わります。
初めのメニューはフェードインで出てくるのですが、
タブをクリックしてメニューを切り替えると、フェードインで出てこなくなってしまいます。
タブを切り替えてもフェードインで出てくるようにしたいので、
アドバイスよろしくお願い申し上げます。
HTML
1 2<section class="container"> 3 4<ul class="tab-menu"> 5 <li><a href="#content-first" class="active">和牛</a></li> 6 <li><a href="#content-second">飲み物</a></li> 7 <li><a href="#content-third">野菜</a></li> 8 <li><a href="#content-fourth">サイド</a></li> 9 <li><a href="#content-fifth">デザート</a></li> 10</ul> 11 12 13 14<div class="contents"> 15<div id="content-first" class="active"> 16 <div class="box"> 17 <div class="box-wrap"> 18 <h2>タン</h2> 19 <table> 20 <tr> 21 <td>薄切りタン塩</td><td>1200円</td> 22 </tr> 23 <tr> 24 <td>薄切りタン塩</td><td>1200円</td> 25 </tr> 26 <tr> 27 <td>薄切りタン塩</td><td>1200円</td> 28 </tr> 29 </table> 30 </div> 31 <img src="img/xxxx.png"> 32 </div><!--box--> 33 34</div><!--content-first--> 35 36 37 38<div id="content-second"> 39 <div class="box"> 40 <div class="box-wrap"> 41 <h2>カルビ</h2> 42 <table> 43 <tr> 44 <td>薄切りタン</td><td>1200円</td> 45 </tr> 46 <tr> 47 <td>薄切りタン塩</td><td>1200円</td> 48 </tr> 49 <tr> 50 <td>薄切りタン塩</td><td>1200円</td> 51 </tr> 52 </table> 53 </div> 54 <img src="img/xxxx.png"> 55 </div><!--box--> 56 57</div><!--content-second-->
.container .tab-menu { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 1140px; margin: 0 auto; padding-top: 105px; padding-bottom: 130px; background-color: black; } .container .tab-menu li { width: 220px; border: 2px solid white; text-align: center; font-size: 20px; list-style: none; } .container .tab-menu a { display: block; padding: 25px 0px; color: white; letter-spacing: 0.45em; text-align: center; -webkit-transition: background-color 0.6s; transition: background-color 0.6s; } .container .tab-menu a:hover { background-color: #B2A168; -webkit-transition: 0.6s; transition: 0.6s; } .container #content-first, .container #content-second, { background-color: #000000; display: none; padding-bottom: 120px; /*box*/ } .container #content-first .box, .container #content-second .box{ display: -webkit-box; display: -ms-flexbox; display: flex; max-width: 1140px; width: 100%; margin: 0 auto; -webkit-box-pack: space-evenly; -ms-flex-pack: space-evenly; justify-content: space-evenly; background-image: url(../img/slash-short.png); background-position: left 80px top 20px; border-collapse: collapse; padding-bottom: 128px; opacity: 0; -webkit-transform: translateY(30px); transform: translateY(30px); /*wrap*/ } .container #content-first .box-wrap h2, .container #content-second .box-wrap h2{ font-size: 57px; } .container #content-first .box-wrap table, .container #content-second .box-wrap table, { letter-spacing: 0.3em; line-height: 50px; } .container #content-first .box-wrap table td, .container #content-second .box-wrap table td { font-size: 24px; padding-right: 40px; } .container #content-first .box img, .container #content-second .box img { width: 480px; height: 270px; } .container #content-first .box-fadein, .container #content-second .box-fadein,{ opacity: 1; -webkit-transition: 2.5s; transition: 2.5s; -webkit-transform: translateY(0px); transform: translateY(0px); } .container .active { display: block; background-color: #B2A168; }
jquery
1 jQuery(function($){ 2 $('.contents > div').hide(); 3 $('.tab-menu a').click(function () { 4 $('.contents > div').hide().filter(this.hash).fadeIn(); 5 6 $('.tab-menu a').removeClass('active'); 7 $(this).addClass('active'); 8 9 return false; 10 }).filter(':eq(0)').click(); 11 }); 12 13 14 $(window).scroll(function (){ 15 $('.box').each(function(){ 16 var elemPos = $(this).offset().top, 17 scroll = $(window).scrollTop(), 18 windowHeight = $(window).height(); 19 if (scroll > elemPos - windowHeight + 40){ 20 $(this).addClass('box-fadein'); 21 } 22 }); 23}); 24
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/06/14 01:52