javascript - 滚动淡入会淡化所有内容，而不是 1 乘 1

Question

我正在使用淡入动画，因此当对象完全出现在窗口中时，它会淡入。但是，一旦第一个对象淡入，其他所有对象也会淡入，从而制作出所需的效果效果已过时。

这是我的代码:

$(document).ready(function() {
  $(window).scroll(function() {
    $('.hideme').each(function(i) {

      var bottom_of_object = $(this).position().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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post-preview">
  <div class="hideme">
    <a href="#">
      <h3 class="post-title">The night sky is more than beauty</h3>
      <h4 class="post-subtitle">If looking into the sky is not pretty enough...</h4>
    </a>
    <p class="post-meta">Posted by <a href="#">Ricardo Castillo</a> on September 2, 2016 at UTSA</p>
  </div>
</div>
<div class="post-preview">
  <div class="hideme">
    <a href="#">
      <h3 class="post-title">Your account has been compromised</h3>
      <h4 class="post-subtitle">Mr. Robot inspired; cyber security fears</h4>
    </a>
    <p class="post-meta">Posted by <a href="#">Ricardo Castillo</a> on August 9, 2016 at UTSA</p>
  </div>
</div>
<div class="post-preview">
  <div class="hideme">
    <a href="#">
      <h3 class="post-title">Why the future scares me</h3>
      <h4 class="post-subtitle">A technological perspective to the future</h4>
    </a>
    <p class="post-meta">Posted by <a href="#">Ricardo Castillo</a> on September 3, 2016 at UTSA</p>
  </div>
</div>

我找不到这有什么问题，非常感谢您的帮助。

Answer 1

这可行，但是所采用的脚本值太高。消除窗口高度的总和更接近所需的效果。它一直在工作，只是几乎看不见。