jQuery - スクロールのバグへのアニメーション

Question

私はこのコードを実装しました。私はオンラインで見つけましたが、以前に要素がアニメーション化されているかどうかを調べるif文を追加しました。それがあれば、それをアニメーションの対象にするクラスを削除する必要があります。何らかの理由でそれが機能していないと、要素はビューポートに来るたびにアニメーション化されます。

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

私は間違ったものを見つけました。変数の先頭に選択範囲を格納していたので、選択が既に行われていたため、その要素を対象にしたクラスを削除しても問題ありませんでした。

私は上からこれを削除し、それが働いた：

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

Answer 2

クラスを削除しても、要素に関連付けられているバインディングは削除しないでください。

アニメーションを実行する前に、アクティブなクラスを確認します。

if (!$element.hasClass('already-viewed')) { 
    //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'); 
    } 
} 

スクロールでこれらの関数を実行しているので、要素からバインディングを削除することをお勧めします。だから、あなたはそれを次のように変更することができます：

//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'); 
    }