如何在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() { /* 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).fadeIn(400, function(){ $(this).css('opacity', 1) }); } }); }); }); 

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