当元素进入视口时 JQuery fadeIn()答案

【问题标题】：JQuery fadeIn() when element comes into viewport当元素进入视口时 JQuery fadeIn()
【发布时间】：2017-11-24 19:53:23
【问题描述】：

当不同的元素进入视口视图时，当向下滚动页面时，我想将它们淡入淡出。

然而，我的代码会同时淡入所有 DIV（具有“.fadethis”类），而不是仅在特定元素出现时才出现：

$(window).scroll(function() {
  $(".fadethis").each(function() {
  var top_of_element = $(this).offset().top;
  var bottom_of_element = $(this).offset().top + $(this).outerHeight();
  var bottom_of_screen = $(window).scrollTop() + window.innerHeight;
  var top_of_screen = $(window).scrollTop();

  if((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)){
   $(this).fadeIn(10000);
  }

 });
});

CSS

.fadethis{
display:none;
}

【问题讨论】：

你能试试这个吗？ $(".fadethis:visible").each(function() {...});
你也可以添加你的html代码吗？
您的问题可能是这些 div 的样式为“display: none”。在不显示它们的时间内，它们的顶部为 0，底部为 0 + div 的高度。对所有人来说都是一样的。我创建了一支笔，其中 div 可以根据需要淡入：codepen.io/Kathara/pen/RjJjQM

标签： javascript jquery viewport fadein

【解决方案1】：

导入 jQuery，animate.less 和 waypoint

Javascript：

$(document).ready(function(){
    $('.fromLeft').waypoint(function()
    {
      $(this.element).css('opacity',1);
      $(this.element).addClass("bounceInLeft");
    },
    {offset:'100%'});
    $('.fromRight').waypoint(function()
    {
      $(this.element).css('opacity',1);
      $(this.element).addClass("bounceInRight");
    },{offset:'100%'});
    $('.appear').waypoint(function()
    {
      $(this.element).css('opacity',1);
      $(this.element).addClass("fadeIn");
    },{offset:'100%'});
});

HTML

<div class="animated onView fromLeft">
appears from left
</div>

Here你可以看看我做的例子

【讨论】：