A jQuery viewport addClass - removeClass scrollra vibrál
2021-12-01T11:32:46+01:00
2021-12-01T11:32:54+01:00
2022-07-18T22:07:02+02:00
Moracsek
Sziasztok!

Van egy olyan problémám, hogy elég sok css animációnál bevibrál a jQuery és nem tudok rájönni, hogy mit tegyek.

jQuery-vel ellenőrzöm a viewport-ot és ha benn van az az objektum akkor hozzáadok egy "animated" class-t az objektumhoz.

var $animation_elements = $('.animated-rows'); var $window = $(window); function check_if_in_view() { var window_height = $window.innerHeight(); var window_top_position = $window.scrollTop(); var window_bottom_position = (window_top_position + window_height); $.each($animation_elements, 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'); } else { $element.removeClass('animated'); } }); } $window.on('resize scroll', check_if_in_view); $window.trigger('scroll');
Ezt a kódot használom, hogy oda-vissza működő animációt tudjak létrehozni.
A slideInUp, backInUp, bounceInUp animációknál ha bejött a viewportba az objektum amig a görgő  lefelé mozog állandóan hozzáadja/töröli az "animated" class-t, tehát az animáció bevibrál.
Ha megállunk és lefut az animáció utána nincs baj.
Az is érdekes, hogy mikor alulról görgetünk felfelé akkor normálisan fut le függetlenül a görgetéstől, egyszer hozzáadja a class-t és annyi.
A lightSpeedInRight például kifogástalanul működik oda-vissza. Annál nincs gond.

Próbáltam más a hasClass-t is, de avval nem működik. Egyszer lefut és még az oldal nem frissül addig nem működik tovább.

Mit lehet tenni, hogy rendesen működjön és csakis egyszer adja hozzá a class-t függetlenül a görgőtől még a viewporton belül tartózkodik az objektum?
Mutasd a teljes hozzászólást!

abcd