Добавить и удалить класс, который запускает анимацию css 3

Question

У меня есть следующий jQuery, который запускает анимацию css, добавляя класс .fade-in.

Однако анимация происходит только один раз, когда класс добавляется после того, как div станет видимым. Я ищу способ добавления класса после того, как вы увидите div, а затем удалите класс после того, как вы пройдете мимо них (больше не в области просмотра), чтобы анимация могла запускаться каждый раз, когда вы видите вас в div.

Вот мой JQuery

;(function($, win) { 


$.fn.inViewport = function(cb) { 
    return this.each(function(i,el){ 
     function visPx(){ 
     var H = $(this).height(), 
      r = el.getBoundingClientRect(), t=r.top, b=r.bottom; 
     return cb.call(el, Math.max(0, t>0? H-t : (b<H?b:H))); 
     } visPx(); 
     $(win).on("resize scroll", visPx); 
    }); 
    }; 
}(jQuery, window)); 



$("#step-one,#step-two,#step-three").inViewport(function(px){ 
    if(px) $(this).addClass("fade-in") ; 
}); 

Answer 1

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

Так что попробуйте

$("#step-one,#step-two,#step-three").inViewport(function(px){ 
if(this.is("visible") $(this).removeClass("fade-in") ; 

Обратитесь к документации: http://api.jquery.com/removeclass/

Answer 2

Вы можете использовать функцию .toggleClass(), которая принимает логическое значение в качестве второго аргумента. Это действительно должно быть Boolean, хотя и не просто правдивое/фальшивое значение.

$("#step-one,#step-two,#step-three").inViewport(function(px){ 
    $(this).toggleClass('fade-in', (px !== 0)); 
}); 

Я не думаю, что ваша visPx() функция вполне прав, хотя. Он возвращает 0, когда верхняя часть элемента больше его высоты, что может произойти, когда элемент все еще отображается в окне просмотра.

Эта функция jsfiddle использует функцию, возвращающую логическое значение, когда элемент виден в окне просмотра.