ページをスクロールすると、opacityで隠れているdivを表示させるというソースを見つけました。
そのソースをコピペしただけで上手く動いたのですが、
わからない所があるので質問させていただきました。
lang
1//スクロール時のコンテンツ表示 2var setElm = $('.scrEvent'), 3 delayHeight = 120; 4setElm.css({display:'block',opacity:'0'}); 5// setElm.hide(); 6 7$(window).on('load scroll resize', function(){ 8 setElm.each(function(){ 9 var setThis = $(this), 10 elmTop =setThis.offset().top, 11 elmHeight =setThis.height(), 12 scrTop = $(window).scrollTop(), 13 winHeight = $(window).height(); 14 if (scrTop > elmTop - winHeight + delayHeight && scrTop < elmTop + elmHeight) { 15 setThis.stop().animate({opacity:'1'},500); 16// setThis.fadeIn(); 17 } else if (scrTop < elmTop - winHeight + delayHeight && scrTop < elmTop + elmHeight){ 18 setThis.stop().animate({opacity:'0'},500); 19// setThis.fadeIn(); 20 } 21 }); 22}); 23} 24 25
このようなソースなのですが、
最初の行で、変数にあるセレクタを格納していて、
複数のdivに同じ名前が付いていて、それを.each()を使うことで
同じクラス名でも上から順に指定ポイントまで来たときに表示される
という認識でいるのですが、
これをanimateでなく、
単純にコメントアウトしている部分のように、fadeIn()を使ってみたのですが
動きませんでした。
どの理由で動かないのかがわかりません。
.each()の認識はこれであっているのかわからず、質問させていただきました。
(JsSTUDIOなどを見たのですが、初心者過ぎて意味が分かりずらかったのです。)
どうぞよろしくお願いします。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/05/11 10:28