如何在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>

​