jQuery scrollbasiert fadeIn nicht auf scroll warten

Question

Ich habe diesen Code bereits erfolgreich für fadeIn, animate, CSS Transitionen und Transformationen verwendet.

$(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'); 
        }); 
       }); 
      }); 
     } 
    }) 
}); 

aber ich kann es einfach nicht richtig mit diesem HTML arbeiten.

<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> 

Ich kann nicht herausfinden, was ich diesmal falsch gemacht habe.

Hätte es deutlicher machen müssen, sorry, ich war in Eile, aus der Tür, bevor die Geschäfte geschlossen. Die Bilder fadeIn, aber sie tun es beim Laden der Seite, nicht beim Blättern.

Answer 1

Ihr findet nur das erste div (item1). Vorausgesetzt, dass Sie sie alle benutzen finden wollen

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

Sie fehlen zwei DIVS am Ende.

Überprüfen Sie immer Ihren HTML-Code, wenn Sie in eine Quandry geraten und etwas nicht funktioniert, wenn es sollte. Sie können einen Berg von Schmerzen auf diese Weise retten.

Ich habe das Gefühl, dass Sie einfach vergessen haben, die letzten zwei divs hier aufzunehmen, und dass sie in Ihrem eigenen Code erscheinen. Allerdings würde ich immer noch sagen die Seite validieren, nur um zu überprüfen.

Während ich hier bin, erklären diese außerhalb der Schleife:

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

Sie möchten Ihre DOM Anrufe so weit wie möglich zu minimieren, und dies während der Dauer nicht von Ihrem sich ändern Schleife.