JQuery/Javascript Einblenden bei Scroll funktioniert nicht

Question

Ich habe an einigen Inhalten gearbeitet, für die am unteren Rand der Bildlaufleiste ein Bild eingeblendet werden muss. Ich habe meinen JSFiddle damit verbunden, in der Hoffnung, Hilfe zu bekommen. Es scheint, dass wenn ich die Klasse entferne, erscheint das Bild gut. Nicht sicher, was zu tun ist.

https://jsfiddle.net/1ak7q0kg/3/

HTML

<div id="slide1"> 
      <div class="content"> 
       <h2>This is a title</h2> 
        <div class="quotes_container"> 
        <h3 class="quotes">“Below this content, an image is supposed to fade in.” </h3> 
         <div class="fadeInBlock"><img src="http://www.strangetravel.com/images/content/120195.jpg"></div> 
       </div> 
      </div> 
     </div> 

Javascript

$(function() { 
    $(window).scroll(function(){ 


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

      var bottom_of_object = $(this).position().top + $(this).outerHeight(); 
      var bottom_of_window = $(window).scrollTop() + $(window).height(); 

      /* Adjust the "200" to either have a delay or that the content starts fading a bit before you reach it */ 
      bottom_of_window = bottom_of_window + 200; 

      if(bottom_of_window > bottom_of_object){ 

       $(this).animate({'opacity':'1'},1000); 

      } 
     }); 

    }); 
}); 

CSS

.fadeInBlock {opacity:0;} 

Answer 1

Der folgende Code funktioniert:

012.351.

$(function() { 
    $(window).scroll(function(){ 


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

      var bottom_of_object = $(this).position().top + $(this).outerHeight(); 
      var bottom_of_window = $(window).scrollTop() + $(window).height(); 

      /* Adjust the "200" to either have a delay or that the content starts fading a bit before you reach it */ 
      bottom_of_window = bottom_of_window + 200; 

      if(bottom_of_window > bottom_of_object){ 

       $(this).animate({'opacity':'1'},1000); 

      } 
     }); 

    }); 
}); 

SIE NICHT ENTHALTEN jQuery SO

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Und schließlich uour HTML: ich ein Bild von einer HTTPS-Quelle enthalten, wie es war eine unsichere Herkunft Fehler in jsfiddle werfen.

<div id="slide1"> 
     <div class="content"> 
      <h2>This is a title</h2> 
       <div class="quotes_container"> 
       <h3 class="quotes">“Below this content, an image is supposed to fade in.” </h3> 
        <div class="fadeInBlock"><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"></div> 
      </div> 
     </div> 
    </div> 

Dies funktioniert. Getestet auf JS Fiddle.