滚动上的淡入淡入淡出所有内容，而不是 1 x 1答案

【问题标题】：Fade-in on scroll fades everything instead of 1 by 1滚动上的淡入淡入淡出所有内容，而不是 1 x 1
【发布时间】：2016-09-30 22:54:53
【问题描述】：

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

这是我的代码：

$(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>

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

【问题讨论】：

这似乎对我有用：jsfiddle.net/gyjgqdLn（您可以调整页面呈现的窗口大小，以便您可以滚动。
有点像吗？不过，一切都会立即消失；根据能见度，我正在尝试一次淡入一个。
我注意到，使用鼠标滚轮滚动，它似乎工作，但只要我向下拖动滚动条，一切都会立即出现......（编辑：没关系，相同的工作行为两者上）
我有点想脚本已经工作了，但是脚本抓取的大小太高了。我将它们减少一点，并更接近预期的效果。它一直都在那里，但几乎看不见，我没有注意到。

标签： javascript jquery html css animation

【解决方案1】：

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

【讨论】：

这应该是评论而不是答案 :-)