Jedes Bild ausblenden, wenn es sich dem oberen Bereich des Ansichtsfensters nähert

Question

Ich versuche Bilder auszublenden, wenn sich jeder mit jQuery dem oberen Rand der Seite nähert. Ich bin derzeit mit dem folgenden jQuery-Code, der gut arbeitet:

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

Aber, ich habe eine neue Klasse für jede img hinzuzufügen und so für jede Instanz dieses kleine Stück Code zu wiederholen, aber ich soll in der Lage sein, Führen Sie eine for-Schleife aus, um jedes Elternelement mit der Klasse .fade zu finden, und führen Sie dann die Überblendungsfunktion aus, wenn jedes Bild in die Nähe des oberen Bereichs des Ansichtsfensters kommt.

auch Dieser Code funktioniert, aber blendet alle Bilder zugleich ...

$(document).ready(function() { 

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

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

}); 

Ich denke, die Frage ist, muss ich erklären, dass, wenn jeder Elternteil (div.fade) gefunden wird, tun dies an ihr Kind, img, aber ich weiß nicht, wie ich das erklären soll, ohne die Funktion zu unterbrechen.

ich auch in sie haben würde gerne verblassen, wenn sie am Boden in Ansichtsfenster kommen, aber eine Sache zu einer Zeit ... :-)

Answer 1

Also, ich das ist, was ich am Ende mit einem Effekt mit Boxen zu schaffen, in mit leicht unterschiedlichen Geschwindigkeiten Verblassen, wenn sie in der Ansicht blättern:

/* 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

Das ist für mich gearbeitet. Achten Sie darauf, den Einsatz use ‚fade1‘ nicht nur ‚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...