jquery - 如何使图像褪色，滚动时可见并且应该重复 Action

Question

我正在使用下面的 js 脚本和 css 来隐藏所有图像的可见性，并且在滚动时它会缓慢显示。它工作正常，但我的问题是它在加载页面时工作一次。我怎样才能让图像淡出并且不仅在页面加载时出现一次，而且 Action 必须重复。

function showImages(el) {
  var windowHeight = jQuery(window).height();
  $(el).each(function() {
    var thisPos = $(this).offset().top;

    var topOfWindow = $(window).scrollTop();
    if (topOfWindow + windowHeight - 200 > thisPos) {
      $(this).addClass("fadeIn");
    }
  });
}

$(window).scroll(function() {
  showImages('.star');
});

.star {
  visibility: hidden;
}

.fadeIn {
  -webkit-animation: animat_show 0.8s;
  animation: animat_show 0.8s;
  visibility: visible !important;
}

@-webkit-keyframes animat_show {
  0% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Test</p>
<p>Test</p>
<img class="star" src="https://www.w3schools.com/html/pic_trulli.jpg"/>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<img class="star" src="https://www.w3schools.com/html/pic_trulli.jpg">
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<img class="star" src="https://www.w3schools.com/html/pic_trulli.jpg">
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Other  test</p>

Answer 1

function showImages(el) {
  var windowHeight = jQuery(window).height();
  $(el).each(function() {
    var thisPos = $(this).offset().top;

    var topOfWindow = $(window).scrollTop();
    if (topOfWindow + windowHeight - 200 > thisPos) {
      $(this).addClass("fadeIn");
    }else{
      $(this).removeClass("fadeIn");
    }
  });
}

$(window).scroll(function() {
  showImages('.star');
});

.star {
  visibility: hidden;
  transition: visibility cubic-bezier(.165, .84, .44, 1) .25s;
}

.fadeIn {
  -webkit-animation: animat_show 0.8s;
  animation: animat_show 0.8s;
  visibility: visible !important;
}

@-webkit-keyframes animat_show {
  0% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Test</p>
<p>Test</p>
<img class="star" src="https://www.w3schools.com/html/pic_trulli.jpg"/>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<img class="star" src="https://www.w3schools.com/html/pic_trulli.jpg">
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<img class="star" src="https://www.w3schools.com/html/pic_trulli.jpg">
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Other  test</p>