jQueryクラスからの単一要素の変更

Question

jQueryを使用して要素が画面に表示されているかどうかを確認しています。同じけれども異なる瞬間に複数の要素を持つ必要があるので、クラスの要素を選択しています。 1つの要素が画面に表示されたら、それを変更します（fadeIn +アニメーション化されたスライド）。

$(window).scroll(function(){ 
    $(".material-slide-up").each(function(){ 
    if(isScrolledIntoView($(this))) { 
     $(this).fadeIn(1000); 
     $(this).addClass("slideInUp animated"); 
    } 
    }); 
}); 

現在のコードを実行すると、同じクラスのすべての要素が変更されます。私は "each"を使っているからだと思う。

画面上の同じクラスから1つの要素のみを変更する方法はありますか？

Answer 1

このような小さなヘルパー関数が大きい

$.fn.inView = function(){ 
if(!this.length) return false; 
var rect = this.get(0).getBoundingClientRect(); 

return (
    rect.top >= 0 && 
    rect.left >= 0 && 
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && 
    rect.right <= (window.innerWidth || document.documentElement.clientWidth) 
); 

}; 

さて、あなたはDOMを共有していなかったので、私たちは私を使用しますが、ここではペンへのリンクが効果を表示するには、スクロールダウン、です。

呼び出し関数は、あなたの完全なコードを表示する場合、私はあなたのためにそれを適応させることができますが、これは今把握が容易であるべきで、この

$(window).on('scroll',function(){ 
var imgs = $('img'); 
imgs.each(function(){ 
    var $this = $(this); 
    $this.inView() && $this.addClass('magictime vanishIn'); 
}) ; 
}); 

http://codepen.io/damianocel/pen/zBLEXR

のようになります。