jQueryスクロールベースのスクロールスクロールを待っていません

Question

fadeIn、アニメーション、CSSのトランジションとトランスフォーメーションにこのコードを使用しました。

$(window).scroll(function(){ 

    $('.item1').each(function (i) { 

     var bottom_of_object = $(this).offset().top + $(this).outerHeight(); 
     var bottom_of_window = $(window).scrollTop() + $(window).height(); 
     /* For testing only */ 
     console.log(bottom_of_object); 
     console.log(bottom_of_window); 

     /* If the object is visible in the window */ 
     if (bottom_of_window > bottom_of_object) { 

      $(this).fadeIn(1000, 'swing', function() { 
       $('.item2').fadeIn(1000, 'swing', function() { 
        $('.item3').fadeIn(1000, 'swing', function() { 
         $('.item4').fadeIn(1000, 'swing'); 
        }); 
       }); 
      }); 
     } 
    }) 
}); 

しかし、このHTMLでは正しく動作しません。

<div class="container"> 
    <div class="row"> 
     <div class="col-md-3 col-xs-12 img-responsive item item1"> 
      <img src="images/gallery/Brows/brows13.png" /> 
     </div> 
     <div class="col-md-3 col-xs-12 img-responsive item item2"> 
      <img src="images/gallery/Liner/liner2.png" /> 
     </div> 
     <div class="col-md-3 col-xs-12 img-responsive item item3"> 
      <img src="images/gallery/Body Ink/BI004.png" /> 
     </div> 
     <div class="col-md-3 col-xs-12 img-responsive item item4"> 
      <img src="images/gallery/Nails/nails1.png" /> 
     </div> 
    </div> 
    </div> 

今回は何が間違っているのか分かりません。

すみませんでしたが、私は店が閉まる前にドアを出て急いでいました。画像はフェードインされますが、スクロールではなく、ページの読み込み時に行います。

Answer 1

それぞれが最初のdiv（item1）のみを検索します。それらをすべて見つけたい場合は、

CSS 
<style>.item4 { display: none; }</style> 

jQuery 
var bottom_of_window = $(window).scrollTop() + $(window).height(); 
$(window).scroll(function(){ 

$('.item1').each(function (i) { 

    var bottom_of_object = $(this).offset().top + $(this).outerHeight(); 
    /* For testing only */ 
    console.log(bottom_of_object); 
    console.log(bottom_of_window); 

    /* If the object is visible in the window */ 
    if (bottom_of_window > bottom_of_object) { 

    $(this).fadeIn(1000, 'swing', function() { 
     $('.item2').fadeIn(10000, 'swing', function() { 
      $('.item3').fadeIn(10000, 'swing', function() { 
       $('.item4').fadeIn(10000, 'swing'); 
      }); 
     }); 
    }); 
    } 
}) 
}); 

Answer 2

最後に2つのDIVSがありません。

いつも何かがうまく動作していない状態で、あなたのHTMLを検証してください。あなたはそのような痛みの山を救うことができます。

最後の2つのdivをここに含めて忘れてしまったという気持ちがあり、自分のコードに表示されます。しかし、私はまだ確認するだけでページを検証すると言うでしょう。

私はここにいる間、ループのこの外に宣言：

var bottom_of_window = $(window).scrollTop() + $(window).height();

あなたのDOMを最小限にしたいが、可能な限りを呼び出し、これはあなたの期間中に変更するつもりはありませんループ。