jQuery - Animieren auf Scroll-Bug

Question

Ich habe diesen Code online gefunden und eine if-Anweisung hinzugefügt, die überprüft, ob das Element zuvor animiert wurde. Wenn dies der Fall ist, sollte die Klasse entfernt werden, die es zu einem Ziel für die Animation macht. Aus irgendeinem Grund funktioniert es nicht und das Element animiert immer wenn es in den View-Port kommt und nicht nur das erste Mal wie ich es möchte.

var $flyInLeft = $('.fly-in-left'); 
var $window = $(window); 

function check_if_in_view() { 
    var window_height = $window.height(); 
    var window_top_position = $window.scrollTop(); 
    var window_bottom_position = (window_top_position + window_height); 

    $.each($flyInLeft, function() { 
    var $element = $(this); 
    var element_height = $element.outerHeight(); 
    var element_top_position = $element.offset().top; 
    var element_bottom_position = (element_top_position + element_height); 

    //check to see if this current container is within viewport 
    if ((element_bottom_position >= window_top_position) && 
     (element_top_position <= window_bottom_position)) { 
     $element.addClass('animated slideInLeft already-viewed'); 
    } else { 
     $element.removeClass('animated slideInLeft'); 
    } 

    // This is the bit that doesn't seem to work. 
    if ($element.hasClass('already-viewed')) { 
     $element.removeClass('fly-in-left'); 
    } 
    }); 

Answer 1

Ich fand was falsch. Ich habe die Auswahl oben in einer Variablen gespeichert, so dass es egal war, ob ich die Klasse, die das Element für die Animation anvisierte, entfernt hatte, weil die Auswahl bereits stattgefunden hatte.

Ich löschte diese von oben und es funktionierte:

var $flyInLeft = $('.fly-in-left'); 

Answer 2

Durch das Entfernen der Klasse sollten die Bindungen, die an das Element angehängt sind, nicht entfernt werden.

Suchen Sie nach der aktiven Klasse, bevor Sie die Animationen ausführen.

Es wäre besser, alle Bindungen aus dem Element zu entfernen, da Sie diese Funktionen immer noch auf scroll ausführen. Also könnten Sie das ändern zu:

//check to see if this current container is within viewport 
    if ((element_bottom_position >= window_top_position) && 
    (element_top_position <= window_bottom_position)) { 
     $element.addClass('animated slideInLeft already-viewed'); 

     //Unbind scroll event 
     $(window).off("scroll", check_if_in_view); 

    } else { 
     $element.removeClass('animated slideInLeft'); 
    }