JQuery fadeIn() wenn Element ins Ansichtsfenster kommt

Ich möchte verschiedene Elemente einblenden, sobald sie in die Ansichtsfensteransicht kommen, wenn ich eine Seite herunterscrolle.JQuery fadeIn() wenn Element ins Ansichtsfenster kommt

jedoch Mein Code in allen DIVs schwindet auf einmal (das die ".fadethis" Klasse haben), statt nur dann, wenn das spezifische Element in Sicht kommt:

$(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; 
}

Quelle

2017-11-24 rainerbrunotte

Können Sie das versuchen? $ (". fadethis: visible"). je (function() {...}); –

Können Sie auch Ihren HTML-Code hinzufügen? –

Ihr Problem ist wahrscheinlich, dass diese divs einen Stil "display: none" haben. Während der Zeit, in der sie nicht angezeigt werden, ist ihre obere 0 und die untere 0 + die Höhe der div. Es ist für alle dasselbe. Ich habe einen Stift erstellt, in dem die divs eingeblendet werden, wie Sie möchten: https://codepen.io/Kathara/pen/RjJjQM – Kathara

Import jQuery, animate.less und 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%'}); 
});

Und HTML

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

Here Sie ein Beispiel sehen kann ich

gemacht

Quelle

2017-11-24 10:50:21 Saifer

JQuery fadeIn() wenn Element ins Ansichtsfenster kommt

Antwort

Verwandte Themen