html5 jquery3.3.1を使用しています。
前提・実現したいこと
「jquery inview.js」を使って画面内に入った文字を<p>ごとに個別にフェードインしたい。
発生している問題・エラーメッセージ
inviewにより文字はフェードインするが、全ての<p>が同時にフェードインしてしまう
該当のソースコード
html
1 <div class="fade"> 2 <p>本文1</p> 3 <p>本文2</p> 4 <p>本文3</p> 5 </div> 6 <p>本文4</p> 7 <p>本文5</p> 8 <p>本文6</p> 9 <p>本文7</p> 10 <p>本文8</p> 11 <p>本文9</p> 12 13 14 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 15 <script src="script.js"></script> 16 <script type="text/javascript" src="jquery.inview-master/jquery.inview.js"></script>
css
1p { 2 opacity: 0; 3 padding: 50px 4} 5
Javascript
1 2$(function() { 3$('.fade').on('inview', function(event, isInView) { 4 var p = $('p', this)[0]; 5 if (isInView) { 6$('p').animate({opacity:'1'}); 7 } else { 8$('p').animate({opacity:'0'}); 9 } 10 }); 11 }) 12
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/04/12 09:44
2019/04/27 02:01
2019/05/06 08:39
2019/05/06 14:36