html中の特定の透明要素(.fade_in)がスクロールして画面の半分の位置に来たらフェードアップする処理を作っています。
それ自体は出来たので、対象要素に設定したdata-*属性を読み取ってフェードアップ実行までのdelay(n)を組み入れたところ正常に動かなくなりました
最初のスライドアップは成功するのですが、上方向にスクロールさせて再度要素が隠れたあとにもう一度
スライドアップさせようとしても失敗します
どの部分に問題があるのでしょうか
環境はChrome最新とjQuery(1.11.3)です
html
1<div class="fade_up"> 2 <p>スライドアップする要素1</p> 3</div> 4<div class="fade_up" data-fade_delay="750"> 5 <p>スライドアップする要素2</p> 6</div>
css
1.fade_up { 2 opacity:0; 3 transition-duration: 1.7s; 4}
javascript
1 /* 2 fade_up() //$(window).scroll()内部で呼び出し実行 3 */ 4 function fade_up(){ 5 $('.fade_up').each(function(){ 6 var POS = $(this).offset().top; 7 //scrolledはスクロール量、win_heightはウィンドウ高さ 8 if (scrolled > POS - win_height + win_height/4){ 9 var dly = $(this).attr('data-fade_delay') ? $(this).attr('data-fade_delay') : 0; 10 $(this).delay(dly).queue(function(){ 11 $(this).css({ 12 'opacity':'1', 13 'transform':'translateY(0)' 14 }); 15 }); 16 } else { 17 $(this).css({ 18 'opacity':'0', 19 'transform':'translateY(100px)' 20 }); 21 } 22 }); 23 }
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/12/05 02:37
2017/12/05 09:02