Question

我正在使用淡入淡出的动画，这样当窗口中的对象完全可见时，它会淡入。但是，只要第一个对象淡入，其他所有内容都会淡入，期望的效果已经过时。

这是我的代码：

＆＃13;

$(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);
      }
    });
  });
});

＆＃13;

.hideme {
  opacity: 0;
}

＆＃13;

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

＆＃13;

我无法找到这个有什么问题，非常感谢一只手。

Answer 1

这样可行，但所采用的脚本值太高。消除窗口高度的总和更接近期望的效果。它总是起作用，几乎看不到。

滚动时淡入淡出所有内容而不是1乘1

1 个答案: