toggleClass, когда объект в области просмотра запускает анимацию CSS3

Question

Уже несколько дней я очень старался, чтобы это сработало, но я нахожусь в конце пути, вот почему я прошу вас о помощи.

У меня есть фрагмент кода (ниже), который может добавить класс к объекту, если он находится в области просмотра. Это идеально подходит для запуска любой CSS3-анимации. Код работает в chrome, local и на моем удаленном сервере, но firefox работает только локально, поэтому класс добавляется к объекту, но на моем удаленном сервере нет перехода. Все анимации, которые не используют класс переключения, работают нормально с Firefox, поэтому CSS настроен правильно.

Кто-нибудь имеет представление, почему код не работает в Firefox, на моем удаленном сервере? Фрагмент кода включен перед тегом закрытия тела.

    $(function () { 
    // your code here
    $.expr[':'].inViewPort = function(obj){
    var scrollTop = $(window).scrollTop();
    var viewportHeight = $(window).height();
    var top = $(obj).offset().top;
    var bottom = top + $(obj).height();
    if (top <= scrollTop || bottom <= (scrollTop + viewportHeight / 0.8)) {
        return true;
    } else {
        return false;
    }
};

    });
    $(window).scroll(function (e) {
        $('.inview').each(function(){
            var self = $(this),
                inView = self.is(':inViewPort');
            self.toggleClass('animated', inView);
        });
    });

Код работает следующим образом: добавьте класс "animated" ко всем объектам с классом "inview", если объект находится в области просмотра. Предполагается, что для запуска анимации css3, которая была применена к объекту, например, "fadeInLeft".

Спасибо за любую идею. Также, возможно, кому-то пришла в голову идея запустить анимацию CSS3, если объект находится в области просмотра.

ура знак

Answer 1

Я бы посоветовал немного укротить ручку свитка, посмотрим, имеет ли это какое-то значение:

(function () {
    var timeout;
    $(window).scroll(function (e) {
        clearTimeout(timeout);
        timeout = setTimeout(function () {
            $('.inview').each(function () {
                var self = $(this),
                    inView = self.is(':inViewPort');
                self.toggleClass('animated', inView);
            });
        }, 50);
    });
}());