jqueryスクリプトで.fadeInエフェクトを追加するには？

Question

.fadeInエフェクトを.animateではなくスクリプトに追加しようとしましたが、動作しません。基本的には、スクロールして要素をフェードインさせようとします。これは、スクリプトやHTMLです：

$(document).ready(function() { 
 

 
    /* Every time the window is scrolled ... */ 
 
    $(window).scroll(function() { 
 

 
    /* Check the location of each desired element */ 
 
    $('.hideme').each(function(i) { 
 

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

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

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

 
     } 
 
    }); 
 
    }); 
 
});

.hideme { 
 
    opacity: 0; 
 
    height: 300px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="hideme"> 
 
    <p>This is some text.</p> 
 
</div> 
 
<div class="hideme"> 
 
    <p>This is some text.</p> 
 
</div> 
 
<div class="hideme"> 
 
    <p>This is some text.</p> 
 
</div>

Answer 1

$(document).ready(function() { 
 
\t /* Every time the window is scrolled ... */ 
 
\t $(window).scroll(function() { 
 
\t \t /* Check the location of each desired element */ 
 
\t \t $('.hideme').each(function(i) { 
 
\t \t \t var bottom_of_object = $(this).offset().top + $(this).outerHeight(); 
 
\t \t \t var bottom_of_window = $(window).scrollTop() + $(window).height(); 
 
\t \t \t /* If the object is completely visible in the window, fade it it */ 
 
\t \t \t if (bottom_of_window > bottom_of_object) { 
 
\t \t \t \t $(this).fadeIn(400, function(){ 
 
\t \t \t \t \t $(this).css('opacity', 1) 
 
\t \t \t \t }); 
 
\t \t \t } 
 
\t \t }); 
 
\t }); 
 
});

.hideme { 
 
    opacity: 0; 
 
    height: 300px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 
<div class="hideme"> 
 
    <p>This is some text.</p> 
 
</div> 
 
<div class="hideme"> 
 
    <p>This is some text.</p> 
 
</div> 
 
<div class="hideme"> 
 
    <p>This is some text.</p> 
 
</div>