jQuery изменение одного элемента из класса

Question

Я использую jQuery, чтобы проверить, находится ли элемент на экране. Я выбираю элемент по его классу, так как у меня есть несколько элементов, которые должны делать то же самое, но в разные моменты. Когда один элемент отображается на экране, я меняю его (fadeIn + анимированный слайд вверх).

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

Когда я запускаю текущий код, все элементы с тем же классом изменяются. Я думаю, это потому, что я использую «каждый».

Есть ли способ изменить только один элемент из того же класса, что и на экране?

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

Если вы показать свой полный код, я могу приспособить это для вас, но это должно быть легко выяснить прямо сейчас.