jQuery、要素が画面上にあるときにアニメーションを再生する方法

Question

ポイントに達すると、ブラウザはアニメーションを同時に再生します。それは私が望むものではありません。ブラウザは、すべてのアニメーションを分離して再生する必要があります。

これは私のjQueryのコードです：

function initScrollAnimation(){ 

    $('.slideLeft').each(function(i){ 

      var bottom_of_object = $(this).position().top + $(this).outerHeight() + $(window).height() - 500; 
      var bottom_of_window = $(window).scrollTop() + $(window).height(); 

      if(bottom_of_window > bottom_of_object){ 
       $(".slideLeft").addClass('active'); 
      }; //else { 
       //$(".slideLeft").removeClass('active'); 
      //}; 
    }); 

    $('.slideRight').each(function(i){ 

      var bottom_of_object = $(this).position().top + $(this).outerHeight() + $(window).height() - 500; 
      var bottom_of_window = $(window).scrollTop() + $(window).height(); 

      if(bottom_of_window > bottom_of_object){ 
       $(".slideRight").addClass('active'); 
      }; //else { 
       //$(".slideLeft").removeClass('active'); 
      //}; 
    }); 

} 

そして、これはCSSコード

.slideLeft{ 
    margin-left:-25%; 
} 

    .slideRight{ 
     margin-right:-25%; 
    } 

.slideLeft.active{ 
    margin-left: 0%; 
    transition: all 0.5s ease-in; 
} 

    .slideRight.active{ 
     margin-right: 0%; 
     transition: all 0.5s ease-in; 
    } 

Answer 1

あるオブジェクト

.slideLeft{ 
    margin-left:-25%; 
} 

    .slideRight{ 
     margin-right:-25%; 
    } 

.slideLeft.active{ 
    margin-left: 0%; 
    transition: all 0.7s ease-in; 
} 

    .slideRight.active{ 
     margin-right: 0%; 
     transition: all 0.3s ease-in; 
} 

かのタイムアウト機能を使用するための遷移時間を変更divの1つ：

setTimeout(function(){ 
$('.slideRight').each(function(i){ 

      var bottom_of_object = $(this).position().top + $(this).outerHeight() + $(window).height() - 500; 
      var bottom_of_window = $(window).scrollTop() + $(window).height(); 

      if(bottom_of_window > bottom_of_object){ 
       $(".slideRight").addClass('active'); 
      }; //else { 
       //$(".slideLeft").removeClass('active'); 
      //}; 
    }); 
}, 200); 

Answer 2

あなたは（垂直）あなたは異なる位置にある要素を持っていると言って、それが見えるようになったときに要素にアニメーションをトリガしたい場合：

ちょうどあなたがしている現時点ではと$(this).addClass('active');

で$(".slideLeft").addClass('active');を置き換えます.slideLeftのいずれかの位置を確認した後.slideRight

と

同じ.slideLeft要素の全てにactiveクラスを追加します