Question

要在滚动上淡入淡出元素，我已经使用了一些代码并在我的网站上使用了它：

$(document).ready(function(){
  $(window).scroll( function(){
    $('.fadein').each(function(i){
      var top_of_element = $(this).offset().top;
      var bottom_of_window = $(window).scrollTop() + $(window).height();
      if( bottom_of_window > top_of_element ){
        $(this).animate({'opacity':'1'},1000);
      }
    });
    $('.fadeineach').each(function(i){
      var top_of_element = $('.fadeineachparent').offset().top;
      var bottom_of_window = $(window).scrollTop() + $(window).height();
      if( bottom_of_window > top_of_element ){
        $(this).delay(80 * i).animate({'opacity':'1'},1000);
      }
    });
  });
});

使用此代码，我对我的元素有很好的fadeIn效果：

<section class="fadein">
    <p>Element of the section fadein</p>
</section>

对于多个元素，请在父节上滚动：

<section class="fadeineachparent">
  <div class="card fadeineach">
    <p>Element</p>
  </div>
  <div class="card fadeineach">
    <p>Element</p>
  </div>
  <div class="card fadeineach">
    <p>Element</p>
  </div>
</section>

可以肯定我的代码不是很漂亮，但是可以用...：P

问题出在Safari上，有时在Chrome上滚动时，该网站似乎滞后了，它对用户不友好。我尝试了一些在Internet上找到的东西，但是没有用...：/

您有什么想法吗？

FadeIn滚动：jQuery滚动滞后

0 个答案: