各画像がビューポートの最上部に近づくとフェードアウトします

Question

jQueryを使用して画像がページの最上部に近づくと、画像をフェードアウトしようとしています。私は現在、正常に動作し、次のjQueryコード、使用しています：

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

をしかし、私はそれぞれのimgのために新しいクラスを追加し、インスタンスごとにコードのこの小さな塊を繰り返して維持する必要がありますが、私のことができるようになりforループを実行して各親をクラス.fadeで見つけ出し、各画像がビューポートの最上部の近くに来るとフェーディング機能を実行します。

このコードも動作しますが、同時にすべての画像をフェード...

$(document).ready(function() { 

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

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

}); 

私は問題があると思いますが、私はそれぞれの親（div.fade）が発見された場合に、行うことを宣言する必要がありますこれは子供のために、imgですが、私はその機能を破壊することなく宣言する方法を知らない。

私はまた、彼らは下部にあるビューポートに入って来るとき、彼らはフェードイン持ってみたい

が、一度に一つのこと... :-)

Answer 1

ない「fade1」必ず使用使用してください、私これは、私は、彼らが視界にスクロールすると、わずかに異なる速度でフェードインボックスと効果を作成するために使用してしまったものです：

/* 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"> 
 
\t <div class="info-boxes-section"> 
 
\t \t <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>

Answer 2

は、これは私のために働きました。だから「フェード」

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