当每个图像靠近视口顶部时淡出每个图像

Question

我正在尝试使用 jQuery 在每个图像接近页面顶部时淡出图像。我目前正在使用以下 jQuery 代码，它工作正常：

$(window).scroll(function(){
     $(".fade1").css("opacity", 1 - $(window).scrollTop() / 50);
});

但是，我必须为每个 img 添加一个新的 class 并为每个实例重复这一小块代码，但我应该能够做一个 for 循环来找到每个 parent 使用 class .fade，然后运行当每个图像靠近视口顶部时的淡入淡出功能。

此代码也有效，但会同时淡化所有图像...

$( document ).ready(function() {

  $( ".fade" ).each(function( index ) {
    if($(this).find('img').length > 0){

      $(window).scroll(function(){
          $("img").css("opacity", 1 - $(window).scrollTop() / 50);
      });
     }
  });

});

我认为问题是，我需要声明当找到每个 parent (div.fade) 时，对它们的 child、img 执行此操作，但我没有知道如何在不破坏功能的情况下声明它。

我也很想让它们在底部进入视口时淡入，但一次一件事...:-)

Answer 1

这对我有用。确保使用 'fade1' 而不仅仅是 'fade'

<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(".fade1").each(function (index) {
            if ($(this).find('img').length > 0) {
                $(window).scroll(function () {
                    $(".fade1").css("opacity", 1 - $(window).scrollTop() / 1000);
                });
            }

Lots of text... 
<div class="fade1">
    <img src="~/Images/orderedList4.png" class="fade1" />
</div>
<div class="fade1">
    <img src="~/Images/orderedList4.png" class="fade1" />
</div>
        });
    });
</script>
Lots of text...

Answer 2

所以，这就是我最终用来创建效果的方法，当框滚动到视图中时，它们以略微不同的速度淡入：

 /* For category pages and home page, check to see if element is already in the viewport on page load */    
  /* Check the location of each desired element */
  $('.box').each( function(i){
    var bottom_of_object = $(this).offset().top + $('.box h5').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'},500);   
    }
  }); 
  
 /* For category pages and home page, when the window is scrolled, fade articles in ... */
  function fadeBox(){
  /* Check the location of each desired element */
    $('.fade').each( function(i){
      var bottom_of_object = $(this).offset().top + $('.category-product h5').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'},500);      
      }
    });
    $('.fade2').each( function(i){ 
      var bottom_of_object = $(this).offset().top + $('.category-product h5').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'},700);      
      }
    }); 
    $('.fade3').each( function(i){ 
      var bottom_of_object = $(this).offset().top + $('.category-product h5').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'},600);      
      }
    }); 
  }
  
  $(window).scroll( function(){
    
    fadeBox();
    
  });

.extra-space {
    height: 500px;
    border: 1px solid red;
    width: 100%;
}
.box {
    opacity: 0;
}
.info-boxes-section {
    padding: 20px 0;
}
.info-box p, .info-box a {
    margin: 0;
    font-size: 0.9rem;
}
.info-box {
    vertical-align: top;
    width: 49.2%;
    display: inline-block;
    text-align: center;
}
.info-box img {
    width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="extra-space"></div>
<div class="white-full-width">
 <div class="info-boxes-section">
  <div class="info-boxes-wrapper">
    
      <article class="box info-box fade">
        <img class="fade" src="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" data-pin-nopin="nopin">
      </article>
      
      <article class="box info-box fade3">
        <img class="fade3" src="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" data-pin-nopin="nopin">
      </article>
      
      <article class="box info-box fade">
        <img class="fade" src="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" data-pin-nopin="nopin">
      </article>
      
      <article class="box info-box fade2">
        <img class="fade2" src="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" data-pin-nopin="nopin">
      </article>

    </div>
  </div>
</div>

当每个图像靠近视口顶部时淡出每个图像

Fade out each image when it nears the top of viewport

jquery

jquery-ui

parallax

fade

fadeout